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 相关文章推荐
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
基于jquery实现图片上传本地预览功能
Jan 08 Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
Jun 08 Javascript
详解vue组件开发脚手架
Jun 15 Javascript
ng-alain表单使用方式详解
Jul 10 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 Javascript
vue单文件组件无法获取$refs的问题
Jun 24 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 Javascript
vue render函数动态加载img的src路径操作
Oct 26 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框架的性能
2008/01/10 PHP
处理php自动反斜杠的函数代码
2010/01/05 PHP
PHP 创建标签云函数代码
2010/05/26 PHP
过滤掉PHP数组中的重复值的实现代码
2011/07/17 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
使用PHP静态变量当缓存的方法
2013/11/13 PHP
php教程之phpize使用方法
2014/02/12 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
深入理解JavaScript的async/await
2018/08/05 Javascript
python中for语句简单遍历数据的方法
2015/05/07 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
python八大排序算法速度实例对比
2017/12/06 Python
详解python中的 is 操作符
2017/12/26 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
爱心活动计划书
2014/04/26 职场文书
销售顾问工作计划书
2014/08/15 职场文书
奥巴马上海演讲稿
2014/09/10 职场文书
闪闪的红星观后感
2015/06/08 职场文书
仓库管理制度范本
2015/08/04 职场文书
SQL Server使用导出向导功能
2022/04/08 SQL Server