AngularJS-모듈

AngularJS는 모듈 방식을 지원합니다. 모듈은 서비스, 컨트롤러, 애플리케이션 등과 같은 로직을 코드에서 분리하고 코드를 깔끔하게 유지하는 데 사용됩니다. 별도의 js 파일에 모듈을 정의하고 module.js 파일에 따라 이름을 지정합니다. 다음 예에서는 두 개의 모듈을 만들 것입니다.

Application Module − 컨트롤러로 애플리케이션을 초기화하는 데 사용됩니다.
Controller Module − 컨트롤러를 정의하는 데 사용됩니다.

애플리케이션 모듈

다음 코드가 포함 된 mainApp.js 라는 파일 이 있습니다.

var mainApp = angular.module("mainApp", []);

여기서 우리는 애플리케이션을 선언합니다. mainAppangular.module 함수를 사용하여 모듈을 만들고 빈 배열을 전달합니다. 이 배열은 일반적으로 종속 모듈을 포함합니다.

컨트롤러 모듈

studentController.js

mainApp.controller("studentController", function($scope) {
   $scope.student = {
      firstName: "Mahesh",
      lastName: "Parashar",
      fees:500,
      
      subjects:[
         {name:'Physics',marks:70},
         {name:'Chemistry',marks:80},
         {name:'Math',marks:65},
         {name:'English',marks:75},
         {name:'Hindi',marks:67}
      ],
      fullName: function() {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName + " " + studentObject.lastName;
      }
   };
});

여기에서 컨트롤러를 선언합니다. studentController mainApp.controller 함수를 사용하는 모듈.

모듈 사용

<div ng-app = "mainApp" ng-controller = "studentController">
   ...
   <script src = "mainApp.js"></script>
   <script src = "studentController.js"></script>
	
</div>

여기서는 ng-app 지시문을 사용하는 애플리케이션 모듈과 ngcontroller 지시문을 사용하는 컨트롤러를 사용합니다. 메인 HTML 페이지에서 mainApp.js와 studentController.js를 가져옵니다.

예

다음 예제는 위에서 언급 한 모든 모듈의 사용을 보여줍니다.

testAngularJS.htm

<html>
   <head>
      <title>Angular JS Modules</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      <script src = "/angularjs/src/module/mainApp.js"></script>
      <script src = "/angularjs/src/module/studentController.js"></script>
      
      <style>
         table, th , td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
         }
         table tr:nth-child(odd) {
            background-color: #f2f2f2;
         }
         table tr:nth-child(even) {
            background-color: #ffffff;
         }
      </style>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "mainApp" ng-controller = "studentController">
         
         <table border = "0">
            <tr>
               <td>Enter first name:</td>
               <td><input type = "text" ng-model = "student.firstName"></td>
            </tr>
            <tr>
               <td>Enter last name: </td>
               <td><input type = "text" ng-model = "student.lastName"></td>
            </tr>
            <tr>
               <td>Name: </td>
               <td>{{student.fullName()}}</td>
            </tr>
            <tr>
               <td>Subject:</td>
               
               <td>
                  <table>
                     <tr>
                        <th>Name</th>
                        <th>Marks</th>
                     </tr>
                     <tr ng-repeat = "subject in student.subjects">
                        <td>{{ subject.name }}</td>
                        <td>{{ subject.marks }}</td>
                     </tr>
                  </table>
               </td>
            </tr>
         </table>
      </div>
      
   </body>
</html>

mainApp.js

var mainApp = angular.module("mainApp", []);

studentController.js

mainApp.controller("studentController", function($scope) {
   $scope.student = {
      firstName: "Mahesh",
      lastName: "Parashar",
      fees:500,
      
      subjects:[
         {name:'Physics',marks:70},
         {name:'Chemistry',marks:80},
         {name:'Math',marks:65},
         {name:'English',marks:75},
         {name:'Hindi',marks:67}
      ],
      fullName: function() {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName + " " + studentObject.lastName;
      }
   };
});

산출

웹 브라우저에서 textAngularJS.htm 파일을 엽니 다 . 결과를 확인하십시오.