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 相关文章推荐
Javascript图像处理思路及实现代码
Dec 25 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
Sep 02 Javascript
在JavaScript的正则表达式中使用exec()方法
Jun 16 Javascript
coffeescript使用的方式汇总
Aug 05 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
VuePress 快速踩坑小结
Feb 14 Javascript
vue 实现特定条件下绑定事件
Nov 09 Javascript
javascript实现简单留言板案例
Feb 09 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
缅甸的咖啡简史
2021/03/04 咖啡文化
PHP安装问题
2006/10/09 PHP
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
PHP 图片上传实现代码 带详细注释
2010/04/29 PHP
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
js this函数调用无需再次抓获id,name或标签名
2014/03/03 Javascript
javascript中Math.random()使用详解
2015/04/15 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
Python变量类型知识点总结
2019/02/18 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
建设单位项目负责人任命书
2014/06/06 职场文书
2014年个人委托书范本
2014/10/13 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
三行辞职书范文
2015/02/26 职场文书
Spring Bean是如何初始化的详解
2022/03/22 Java/Android