举例讲解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 相关文章推荐
Javascript 汉字字节判断
Aug 01 Javascript
jquery 如何动态添加、删除class样式方法介绍
Nov 07 Javascript
js关闭当前页面(窗口)的几种方式总结
Mar 05 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
vue+axios实现post文件下载
Sep 25 Javascript
深入理解 ES6中的 Reflect用法
Jul 18 Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 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 中的类
2006/10/09 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
vue element-ui table表格滚动加载方法
2018/03/02 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
Jquery Fade用法详解
2020/11/06 jQuery
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
django 创建过滤器的实例详解
2017/08/14 Python
浅析python的优势和不足之处
2018/11/20 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
对python中的argv和argc使用详解
2018/12/15 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
详解rem 适配布局
2018/10/31 HTML / CSS
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
.net C#面试题
2012/08/28 面试题
毕业生教师求职信
2013/10/20 职场文书
小学教师师德感言
2014/02/10 职场文书
降消项目实施方案
2014/03/30 职场文书
初中地理教学反思
2016/02/19 职场文书
python画条形图的具体代码
2022/04/20 Python
Python实现信息管理系统
2022/06/05 Python