这篇文章主要介绍了AngularJS中的模块,文中讲到了其应用模块和控制器模块的例子,需要的朋友可以参考下
AngularJS支持模块化的方法。模块用于单独的逻辑表示服务，控制器，应用程序等，并保持代码的整洁。我们在单独的js文件中定义的模块，并将其命名为按照module.js文件形式。在这个例子中，我们要创建两个模块。
- Application Module – 用于初始化控制器应用程序
- Controller Module – 用于定义控制器
应用模块
mainApp.js var mainApp = angular.module("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 = <em style="color:transparent">来源[email protected]搞@^&代*@码网</em>$scope.student; return studentObject.firstName + " " + studentObject.lastName; } }; });
在这里，我们已经声明采用studentController模块的mainApp.controller功能的控制器。
使用模块
<div> ..
在这里，我们使用 ng-app 指令和控制器采用ng-controller指令应用模块。我们已经在主要的HTML页面导入mainApp.js和studentController.js。
示例
下面的例子将展示上述所有模块。
testAngularJS.htm
<title>Angular JS Modules</title> 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; } <h2>AngularJS Sample Application</h2><div> <table border="0"> <tr><td>Enter first name:</td><td></td></tr><tr><td>Enter last name: </td><td></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> <td>{{ subject.name }}</td><td>{{ subject.marks }}</td></tr></table></td></tr></table></div>
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; } }; });
输出
在Web浏览器打开textAngularJS.htm。看到结果如下。
以上就是举例讲解AngularJS中的模块的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：举例讲解AngularJS中的模块
转载请注明原文链接：举例讲解AngularJS中的模块
