AngularJS - Mô-đun

AngularJS hỗ trợ cách tiếp cận mô-đun. Các mô-đun được sử dụng để tách logic như dịch vụ, bộ điều khiển, ứng dụng, v.v. khỏi mã và duy trì mã sạch. Chúng tôi xác định các mô-đun trong các tệp js riêng biệt và đặt tên chúng theo tệp module.js. Trong ví dụ sau, chúng ta sẽ tạo hai mô-đun:

Application Module - được sử dụng để khởi tạo một ứng dụng với (các) bộ điều khiển.
Controller Module - được sử dụng để xác định bộ điều khiển.

Mô-đun ứng dụng

Đây là một tệp có tên mainApp.js chứa mã sau:

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

Ở đây, chúng tôi tuyên bố một ứng dụng mainAppmô-đun sử dụng hàm angle.module và chuyển một mảng trống cho nó. Mảng này thường chứa các mô-đun phụ thuộc.

Mô-đun điều khiển

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;
      }
   };
});

Ở đây, chúng tôi khai báo một bộ điều khiển studentController mô-đun sử dụng chức năng mainApp.controller.

Sử dụng mô-đun

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

Ở đây, chúng tôi sử dụng mô-đun ứng dụng bằng chỉ thị ng-app và bộ điều khiển sử dụng chỉ thị ngcontroller. Chúng tôi nhập mainApp.js và studentController.js trong trang HTML chính.

Thí dụ

Ví dụ sau cho thấy việc sử dụng tất cả các mô-đun được đề cập ở trên.

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;
      }
   };
});

Đầu ra

Mở tệp textAngularJS.htm trong trình duyệt web. Xem kết quả.