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程序设计有所帮助。
相关文章
Angular项目里ngsw-config.json文件作用详解
这篇文章主要为大家介绍了Angular项目里ngsw-config.json文件作用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
这篇文章主要介绍了AngularJS初始化过程分析(引导程序),这一节解释了AngularJS初始化的过程,以及需要的时候你该如何修改AngularJS的初始化,需要的朋友可以参考下2014-12-12
下面小编就为大家带来一篇浅谈angularjs module返回对象的坑(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
由于最近的一个项目使用的是angularjs1.0的版本，涉及到分页查询数据的功能，后来自己就用自定义指令实现了该功能，下面小编把实例demo分享到脚本之家平台，需要的朋友参考下2017-09-09
这篇文章主要介绍了AngularJS实现使用路由切换视图的方法,结合学生信息管理系统为例分析了使用controllers.js控制器来切换视图的具体步骤与相关操作技巧,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了在Angular中利用trackBy来提升性能的实现方法,需要的朋友可以参考下2018-01-01
AngularJS ng-repeat数组有重复值的解决方法
不知道大家是否遇到过这个问题，在当Angular.JS ng-repeat数组中有重复项时，系统就会抛出异常，这是该怎么做？本文通过示例代码介绍了详细的解决方法，有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-10-10
本篇文章主要介绍了angular2路由切换改变页面title的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
每个Angular版本在其生命周期中都经历了各个阶段。组件在Angular中起着关键作用; 在这里，本文将讨论Angular中的组件生命周期以及它们如何影响框架所有版本的生命周期。2021-05-05
这篇文章主要为大家分享了10个大家不能不知道的angularjs英文网站，供大家学习，感兴趣的小伙伴们可以参考一下2016-03-03
最新评论