AngularJS入门教程之模块化操作用法示例
本文实例讲述了AngularJS模块化操作用法。分享给大家供大家参考，具体如下：
在前面几节教程中，代码比较少，为了方便说明问题笔者將控制器代码都写在了HTML页面中，实际上这并不是什么好的编程习惯，而且可维护性差。通常的做法都是將处理业务逻辑的代码写在一个单独的JS文件中，然后在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 模块化
学习要点: 控制器模块化 指令模块化 过滤器模块化 服务模块化 定义值模块化 使用模块工作 第一步:创建一个模块 // function : define module named exampleApp // param detail : // param one : module name // param two : relay on modules collection // parms three : config information var myApp = angular.modu
-
AngularJS 模块化详解及实例代码
AngularJS有几大特性,比如: 1 MVC 2 模块化 3 指令系统 4 双向数据绑定 那么本篇就来看看AngularJS的模块化. 首先先说一下为什么要实现模块化: 1 增加了模块的可重用性 2 通过定义模块,实现加载顺序的自定义 3 在单元测试中,不必加载所有的内容 之前做的几个例子,控制器的代码直接写在script标签里面,这样声明的函数都是全局的,显然不是一个最好的选择. 下面看看如何进行模块化: <script type="text/javascript">
-
AngularJS入门教程之模块化操作用法示例
本文实例讲述了AngularJS模块化操作用法.分享给大家供大家参考,具体如下: 在前面几节教程中,代码比较少,为了方便说明问题笔者將控制器代码都写在了HTML页面中,实际上这并不是什么好的编程习惯,而且可维护性差.通常的做法都是將处理业务逻辑的代码写在一个单独的JS文件中,然后在HTML页面中引入该文件. 然而这样会带来新的问题,我们的控制器全都定义在全局的命名空间中,假设我们有一个公共的JS文件,在登录页面和密码修改页面都引入这个JS,A开发人员和B开发人员英雄所见略同,对控制器的命名都是U
-
C#入门教程之集合ArrayList用法详解
本文实例讲述了C#入门教程之集合ArrayList用法.分享给大家供大家参考,具体如下: .NET Framework提供了用于数据存储和检索的专用类,这些类统称集合.这些类提供对堆栈.队列.列表和哈希表的支持.大多数集合类实现系统的接口.下面我们主要来讲一下ArrayList. ArrayList是命名空间Systrm.Collections下的一部分,它是使用大小可按需动态增加的数组实现IList接口. ArrayList的容量是ArrayList可以保存的元素数.ArrayList的默认初
-
p5.js入门教程之鼠标交互的示例
本文介绍了p5.js入门教程之鼠标交互的示例,分享给大家,具体如下: 一.鼠标交互常用关键词 p5.js提供了许多鼠标操作用的关键词与函数,常用的有: mouseIsPressed:关键词,若鼠标按下则为true,反之为false mouseButton:关键词,用来判断鼠标按下的是哪个键 案例如下: function setup() { createCanvas(400, 400); } function draw() { background(220); if (mouseIsPressed
-
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
本文实例讲述了AngularJS与服务器Ajax交互操作.分享给大家供大家参考,具体如下: AngularJS从Web服务器请求资源都是通过Ajax来完成,所有的操作封装在$http服务中,$http服务是只能接收一个参数的函数,这个参数是一个对象,用来完成HTTP请求的一些配置,函数返回一个对象,具有success和error两个方法. 用法如下: $http({method:'post',url:'loginAction.do' }).success(function(data,status
-
AngularJS中下拉框的高级用法示例
本文实例讲述了AngularJS中下拉框的高级用法.分享给大家供大家参考,具体如下: HTML正文: <body ng-app="myApp"> <!-- 对象内部属性遍历:x--key y---value --> <div ng-controller="myctr01"> {{sites}}<br> <select ng-model="site" ng-options="x for
-
AngularJS中下拉框的基本用法示例
本文实例讲述了AngularJS中下拉框的基本用法.分享给大家供大家参考,具体如下: HTML正文: <div ng-app="myApp" ng-controller="myCtrl"> <select ng-model="selectedName" ng-options="x for x in names"></select> 等价于: <select> <option
-
AngularJS入门教程一：路由用法初探
本文实例讲述了AngularJS路由用法.分享给大家供大家参考,具体如下: 目前的理解中,这个NG的路由模块可以用于带有多视图的单页面开发. 先把所有代码贴出: HTML: <!doctype html> <meta charset="UTF-8"> <html> <head> <link href="self.css" rel="external nofollow" rel="st
-
AngularJS打开页面隐藏显示表达式用法示例
本文实例讲述了AngularJS打开页面隐藏显示表达式用法.分享给大家供大家参考,具体如下: 1.使用 ng-cloak, 同时要在css加入一行 [ng-cloak] {display: none;} 样式 [ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } 2.使用ng-bind, 代替{{}} 这个不太方便,因为使用ng-bin
-
AngularJS入门教程二：在路由中传递参数的方法分析
本文实例讲述了AngularJS在路由中传递参数的方法.分享给大家供大家参考,具体如下: 我们不仅可以在控制器中直接定义属性的值,比如: app.controller('listController',function($scope){ $scope.name="ROSE"; }); AngularJS还提供了传递参数的功能,目前我接触到的一种方式是从视图中传参: <!--首页html--> <li><a href="#/user/18"
-
AngularJS入门教程之路由机制ngRoute实例分析
本文实例讲述了AngularJS路由机制ngRoute.分享给大家供大家参考,具体如下: 引言 在我们介绍路由之前我们首先谈一下SPA,所以SPA就是我们现在经常说的单页应用single page APP,为了实现无刷新的视图切换我们之前的做法就是利用AJAX从后取出数据然后渲染在前台页面HTML中,但是AJAX有一个致命的缺点就是不能实现浏览器的后退按钮失效,为了解决这个问题我们通常使用hash,监听hashchange事件来进行视图切换,另一个方法是用HTML5的history API,通过