举例讲解AngularJS中的模块


Posted in Javascript onJune 17, 2015

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

  1.     Application Module - 用于初始化控制器应用程序
  2.     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 = $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>

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

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

testAngularJS.htm

<html>
  <head>
 <title>Angular JS Modules</title>
 <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>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
 <script src="mainApp.js"></script>
 <script src="studentController.js"></script>
</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;
   }
  };
});

输出

在Web浏览器打开textAngularJS.htm。看到结果如下。

举例讲解AngularJS中的模块

Javascript 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
js中 关于undefined和null的区别介绍
Apr 16 Javascript
jquery中的on方法使用介绍
Dec 29 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
深入理解javascript构造函数和原型对象
Sep 23 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
Dec 15 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
Bootstrap每天必学之日期控制
Mar 07 Javascript
AngularJS Phonecat实例讲解
Nov 21 Javascript
js+css实现打字效果
Jun 24 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
May 23 Javascript
小程序云函数调用API接口的方法
May 17 Javascript
简介AngularJS的HTML DOM支持情况
Jun 17 #Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 #Javascript
JavaScript AOP编程实例
Jun 16 #Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 #Javascript
动态加载jQuery的方法
Jun 16 #Javascript
详解AngularJS中的表格使用
Jun 16 #Javascript
js+HTML5实现视频截图的方法
Jun 16 #Javascript
You might like
基于php验证码函数的使用示例
2013/05/03 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
Javascript实现单例模式
2016/01/24 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
解决vue+elementui项目打包后样式变化问题
2020/08/03 Javascript
在nodejs中创建child process的方法
2021/01/26 NodeJs
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
sublime text 3配置使用python操作方法
2017/06/11 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
Python json模块dumps、loads操作示例
2018/09/06 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
python解析xml简单示例
2019/06/21 Python
对Python中画图时候的线类型详解
2019/07/07 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
Python如何解除一个装饰器
2020/08/07 Python
python实现逻辑回归的示例
2020/10/09 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
美国婴儿和儿童服装购物网站:PatPat
2020/10/01 全球购物
药学专业大学生自荐信
2013/09/28 职场文书
校园安全演讲稿
2014/05/09 职场文书
先进党支部事迹材料
2014/12/24 职场文书
公安机关起诉意见书
2015/05/20 职场文书
劳动保障事务所个人工作总结
2015/08/12 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android