AngularJS模块详解及示例代码


Posted in Javascript onAugust 17, 2016

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

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

Controller Module - 用于定义控制器

应用模块

mainApp.js

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

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

控制器模块

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模块详解及示例代码

以上就是AngularJS模块相关知识的资料整理,后续继续补充相关知识,谢谢大家对本站的支持!

Javascript 相关文章推荐
完整显示当前日期和时间的JS代码
Sep 17 Javascript
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
jQuery提交表单ajax查询实例代码
Oct 07 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
Dec 04 Javascript
用jQuery toggleClass 实现鼠标移上变色
May 14 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
jQuery实现文件上传进度条特效
Aug 12 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
JavaScript逻辑运算符相关总结
Sep 04 Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 #Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 #Javascript
AngularJS表格详解及示例代码
Aug 17 #Javascript
AngularJS过滤器详解及示例代码
Aug 16 #Javascript
AngularJS控制器详解及示例代码
Aug 16 #Javascript
AngularJS表达式讲解及示例代码
Aug 16 #Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 #Javascript
You might like
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
yii2实现 &quot;上一篇,下一篇&quot; 功能的代码实例
2017/02/04 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
jQuery 1.0.2
2006/10/11 Javascript
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
2013/09/22 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
JavaScript中的高级函数
2018/01/04 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
深入浅析python的第三方库pandas
2020/02/13 Python
python向企业微信发送文字和图片消息的示例
2020/09/28 Python
python中四舍五入的正确打开方式
2021/01/18 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
俄罗斯GamePark游戏商店网站:购买游戏、游戏机和配件
2020/03/13 全球购物
如何判断计算机可能已经中马
2013/03/22 面试题
同事打架检讨书
2014/02/04 职场文书
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
公司请假条格式
2014/04/11 职场文书
高中学生评语大全
2014/04/25 职场文书
预防煤气中毒方案
2014/06/16 职场文书
交通事故责任认定书
2015/08/06 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers