web前端开发

您现在的位置是:首页>前端框架

AngularJS

举例讲解AngularJS中的模块

admin:杨小二时间:2019-08-12 22:49:00前端框架0次
AngularJS支持模块化的方法。模块用于单独的逻辑表示服务,控制器,应用程序等,并保持代码的整洁。我们在单独的js文件中定义的模块,并将其命名为按照module.js文件形式。在这个例子中,我们要创建两个模块。

AngularJS支持模块化的方法。模块用于单独的逻辑表示服务,控制器,应用程序等,并保持代码的整洁。我们在单独的js文件中定义的模块,并将其命名为按照module.js文件形式。在这个例子中,我们要创建两个模块。

Application Module - 用于初始化控制器应用程序

Controller Module - 用于定义控制器

应用模块

[js] view plaincopy

  1. mainApp.js  
  2.   
  3. var mainApp = angular.module("mainApp", []);  


在这里,我们已经声明使用 angular.module 功能的应用程序 mainApp 模块。我们已经通过了一个空数组给它。此数组通常包含从属模块。

控制器模块

studentController.js

[js] view plaincopy
  1. mainApp.controller("studentController", function($scope) {  
  2.   $scope.student = {  
  3.    firstName: "Mahesh",  
  4.    lastName: "Parashar",  
  5.    fees:500,  
  6.    subjects:[  
  7.      {name:'Physics',marks:70},  
  8.      {name:'Chemistry',marks:80},  
  9.      {name:'Math',marks:65},  
  10.      {name:'English',marks:75},  
  11.      {name:'Hindi',marks:67}  
  12.    ],  
  13.    fullName: function() {  
  14.      var studentObject;  
  15.      studentObject = $scope.student;  
  16.      return studentObject.firstName + " " + studentObject.lastName;  
  17.    }  
  18.   };  
  19. });  


在这里,我们已经声明采用studentController模块的mainApp.controller功能的控制器。

使用模块

[js] view plaincopy
  1. <div ng-app="mainApp" ng-controller="studentController">  
  2. ..  
  3. <script src="mainApp.js"></script>  
  4. <script src="studentController.js"></script>  


在这里,我们使用 ng-app 指令和控制器采用ng-controller指令应用模块。我们已经在主要的HTML页面导入mainApp.js和studentController.js。

示例

下面的例子将展示上述所有模块。

testAngularJS.htm

[js] view plaincopy
  1. <html>  
  2.   <head>  
  3.  <title>Angular JS Modules</title>  
  4.  <style>  
  5.  table, th , td {  
  6.   border: 1px solid grey;  
  7.   border-collapse: collapse;  
  8.   padding: 5px;  
  9.  }  
  10.  table tr:nth-child(odd) {  
  11.   background-color: #f2f2f2;  
  12.  }  
  13.  table tr:nth-child(even) {  
  14.   background-color: #ffffff;  
  15.  }  
  16.  </style>  
  17.  </head>  
  18.  <body>  
  19.  <h2>AngularJS Sample Application</h2>  
  20.  <div ng-app="mainApp" ng-controller="studentController">  
  21.  <table border="0">  
  22.  <tr><td>Enter first name:</td><td><input type="text" ng-model="student.firstName"></td></tr>  
  23.  <tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr>  
  24.  <tr><td>Name: </td><td>{{student.fullName()}}</td></tr>  
  25.  <tr><td>Subject:</td><td>  
  26.  <table>  
  27.   <tr>  
  28.     <th>Name</th>  
  29.     <th>Marks</th>  
  30.   </tr>  
  31.   <tr ng-repeat="subject in student.subjects">  
  32.     <td>{{ subject.name }}</td>  
  33.     <td>{{ subject.marks }}</td>  
  34.   </tr>  
  35.  </table>  
  36.  </td></tr>  
  37.  </table>  
  38.  </div>  
  39.  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>  
  40.  <script src="mainApp.js"></script>  
  41.  <script src="studentController.js"></script>  
  42. </body>  
  43. </html>  


mainApp.js

[js] view plaincopy
  1. var mainApp = angular.module("mainApp", []);  
  2.   
  3. studentController.js  
  4. mainApp.controller("studentController", function($scope) {  
  5.   $scope.student = {  
  6.    firstName: "Mahesh",  
  7.    lastName: "Parashar",  
  8.    fees:500,  
  9.    subjects:[  
  10.      {name:'Physics',marks:70},  
  11.      {name:'Chemistry',marks:80},  
  12.      {name:'Math',marks:65},  
  13.      {name:'English',marks:75},  
  14.      {name:'Hindi',marks:67}  
  15.    ],  
  16.    fullName: function() {  
  17.      var studentObject;  
  18.      studentObject = $scope.student;  
  19.      return studentObject.firstName + " " + studentObject.lastName;  
  20.    }  
  21.   };  
  22. });  

输出

在Web浏览器打开textAngularJS.htm。

平面设计