AngularJS入门教程之模块化操作用法示例


Posted in Javascript onNovember 02, 2016

本文实例讲述了AngularJS模块化操作用法。分享给大家供大家参考,具体如下:

在前面几节教程中,代码比较少,为了方便说明问题笔者?⒖刂破鞔?攵夹丛诹?TML页面中,实际上这并不是什么好的编程习惯,而且可维护性差。通常的做法都是?⒋?硪滴衤呒?拇?胄丛谝桓龅ザ赖?S文件中,然后在HTML页面中引入该文件。

然而这样会带来新的问题,我们的控制器全都定义在全局的命名空间中,假设我们有一个公共的JS文件,在登录页面和密码修改页面都引入这个JS,A开发人员和B开发人员英雄所见略同,对控制器的命名都是UserController,这样就会导致命名冲突。而且我们在新增一个控制器的时候总是要担心是不是已经有了一个同名的控制器,代码的扩展性是不是很差呢?

AngularJS中的模块能够很好的解决这个问题,接下来我们看看AngularJs怎么处理命名冲突问题。

代码清单1. tutorial04_1.html

<!DOCTYPE html>
<html ng-app="loginMod">
<head lang="en">
 <meta charset="UTF-8">
 <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
 <title>tutorial04_1</title>
</head>
<body>
<div ng-controller="UserController">
 用户名:<input type="text" ng-model="name" placeholder="用户名"/>
 密码:<input type="password" ng-model="pword" placeholder="密码"/>
 <button ng-click="login()">提交</button>
 <p>您输入的用户名:{{name}}</p>
 <p>您输入的密码:{{pword}}</p>
</div>
<script type="text/javascript" src="js/tutorial04.js">
</script>
</body>
</html>

代码清单2. tutorial04_2.html

<!DOCTYPE html>
<html ng-app="pwordMod">
<head lang="en">
 <meta charset="UTF-8">
 <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
 <title>tutorial04_2</title>
</head>
<body>
<div ng-controller="UserController">
 密码:<input type="password" ng-model="pword" placeholder="密码"/>
 <button ng-click="changePwrd()">提交</button>
 <p>您输入的密码:{{pword}}</p>
</div>
<script type="text/javascript" src="js/tutorial04.js">
</script>
</body>
</html>

代码清单3. tutorial04.js

var loginMod = angular.module("loginMod", []);
loginMod.controller("UserController",function($scope,$log)
 {
  $scope.name="admin";
  $scope.pword="123456";
  $log.info( $scope.name);
  $log.info( $scope.pword);
  $scope.login = function()
  {
   alert("登录");
  }
 }
);
var pwordMod = angular.module("pwordMod", []);
pwordMod.controller("UserController",function($scope,$log)
 {
  $scope.pword="123456";
  $scope.changePwrd = function()
  {
   alert("修改密码");
  }
 }
);

我们有登录页面tutorial04_1.html和修改密码页面tutorial04_2.html,控制器代码都写在tutorial04.js中,在这两个页面中都定义了相同的控制器UserController。

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

通过这行代码定义模块,第一个参数为模块名。第二个参数是一个数组,为可选,如果指定该参数则创建一个新的模块,不指定则从配置中检索。

loginMod.controller("UserController",function($scope,$log)...

通过controller函数向模块中添加一个控制器,第一个参数为控制器名称,第二个参数为控制器实现部分。

然后在tutorial04_1.html和tutorial04_2.html就可以使用ng-app="loginMod"和ng-app="pwordMod"来指定页面中的控制器属于哪个模块。

在浏览器中运行页面可以看到,不同页面调用不用模块中的UserController控制器:

AngularJS入门教程之模块化操作用法示例

AngularJS入门教程之模块化操作用法示例

AngularJS源码可点击此处本站下载

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
window.location.href中url中数据量太大时的解决方法
Dec 23 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
jQuery+css实现的换页标签栏效果
Jan 27 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 Javascript
JavaScript微信定位功能实现方法
Nov 29 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
JavaScript中数组常见操作技巧
Sep 01 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
Jan 08 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 Javascript
JQuery事件委托原理与用法实例分析
May 13 jQuery
使用localStorage替代cookie做本地存储
Sep 25 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
Feb 12 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 #Javascript
jQuery图片切换动画特效
Nov 02 #Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 #Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 #Javascript
bootstrap table复杂操作代码
Nov 01 #Javascript
bootstrap flask登录页面编写实例
Nov 01 #Javascript
JS弹出窗口的运用与技巧大全
Nov 01 #Javascript
You might like
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
js实现全选和全不选
2020/07/28 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
python win32 简单操作方法
2017/05/25 Python
pandas 读取各种格式文件的方法
2018/06/22 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
python实现学员管理系统
2019/02/26 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
python实现祝福弹窗效果
2019/04/07 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
精细化工应届生求职信
2013/11/17 职场文书
教育技术学专业职业规划书
2014/03/03 职场文书
毕业大学生自荐信
2014/06/17 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
中标通知书格式
2015/04/17 职场文书
解决Vue+SpringBoot+Shiro跨域问题
2021/06/09 Vue.js
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL
springboot读取nacos配置文件
2022/05/20 Java/Android