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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
javascript里的条件判断
Feb 27 Javascript
js清空表单数据的两种方式(遍历+reset)
Jul 18 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
BootStrap glyphicons 字体图标实现方法
May 01 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
Node.js实现发送邮件功能
Nov 06 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 Javascript
小程序从手动埋点到自动埋点的实现方法
Jan 24 Javascript
JavaScript setInterval()与setTimeout()计时器
Dec 27 Javascript
js实现全选和全不选
Jul 28 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
php 正则表达式小结
2009/08/31 PHP
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
php 遍历目录,生成目录下每个文件的md5值并写入到结果文件中
2016/12/12 PHP
PHP的自定义模板引擎
2017/03/24 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
PHP获取远程http或ftp文件的md5值的方法
2019/04/15 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
基于jquery的超简单上下翻
2010/04/20 Javascript
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
Vue中父组件向子组件通信的方法
2017/07/11 Javascript
python中对list去重的多种方法
2014/09/18 Python
Python函数嵌套实例
2014/09/23 Python
python 文件操作api(文件操作函数)
2016/08/28 Python
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
Python中is与==判断的区别
2017/03/28 Python
基于python实现名片管理系统
2018/11/30 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
军校大学生个人的自我评价
2014/02/17 职场文书
英语老师推荐信
2014/02/26 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
商场租赁意向书
2014/07/30 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
教师见习报告范文
2014/11/03 职场文书
小学生手册家长意见
2015/06/03 职场文书
治庸问责工作总结
2015/08/11 职场文书
委托书范本格式
2019/04/18 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang