一、AngularJS中的模块
前几节的例子中，都直接将控制器的代码写在HTML页面中，这样会使代码的可维护性变差。在实际项目中，通常是把处理业务逻辑的代码写在单独的JS文件中，然后在HTML页面中引入该文件。
这样会出现一个问题：AngularJS1.3版本之前是支持全局控制器的，如果我们的控制器全都定义在全局命名空间中，假设有一个公共的JS页面有多个开发人员在不同页面中使用，当新增控制器或者服务的定义时，容易引发命名冲突。AngularJS应用模块瓜分就能很好的解决这个问题
1.AngularJS模块的定义
angular
对象的
module()
方法可以返回一个模块实例对象，可以调用该对象的
controller()
、
directive()
、
filter()
等方法向模块中添加控制器、指令、过滤器等其他组件
--------------------------------------------------------------------------------------------------------------------
//定义一个无依赖的模块
angular.module
('appModule',[]);
//定义一个依赖module1、module2的模块
angular.module
('appModule',['module1','module2']);
--------------------------------------------------------------------------------------------------------------------
angular.module()
方法能接收三个参数，第一个参数为模块的名称；第二个参数是一个数组，用于指定该模块依赖的模块名称，不依赖其他模块时，传递一个空数组即可；第三个模块为可选参数，该参数接收一个方法，用于对模块进行配置，作用和模块实例的
config()
方法相同
模块定义完成后，在HTML中使用
ng-app
="appModule"即可引用,如：
<html
ng-app
="appModule">
2.使用模块解决命名冲突
即声明不同的模块，并在不同的模块里面添加控制器，调用时调用对应的模块即可
-------------------------------------------------common.js-----------------------------------------------------
var loginApp=
angular.module
("loginApp",[]);
loginApp.controller
("
UserController
",function($scope,$log){
$scope.login=function(){
alert("登陆页面:账号-"+$scope.name+",密码-"+$scope.pw);
$log.info("登陆");
}
});
var registApp=
angular.module
("registApp",[]);
registApp.controller
("
UserController
",function($scope,$log){
$scope.regist=function(){
alert("注册页面:账号-"+$scope.name+",密码-"+$scope.pw);
$log.info("注册");
}
});
----------------------------------------------------login.html---------------------------------------------------
<!DOCTYPE html>
<html
ng-app
="
loginApp
">
<head>
<meta charset="utf-8">
<title>angularjs</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="common.js"></script>
</head>
<body>
<div
ng-controller
="
UserController
" style="border:#ccc solid 1px;">
用户名：<input type="text"
ng-model
="name" placeholder="用户名"/>
密码：<input type="password"
ng-model
="pw" placeholder="密码"/>
<button
ng-click
="login()">登陆</button>
</div>
</body>
</html>
---------------------------------------------------regist.html---------------------------------------------------
<!DOCTYPE html>
<html
ng-app
="
registApp
">
<head>
<meta charset="utf-8">
<title>angularjs</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="common.js"></script>
</head>
<body>
<div
ng-controller
="
UserController
" style="border:#ccc solid 1px;">
用户名：<input type="text"
ng-model
="name" placeholder="用户名"/>
密码：<input type="password"
ng-model
="pw" placeholder="密码"/>
<button
ng-click
="regist()">注册</button>
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------
二、模块化的最佳实践
app
| index.html
|
|——css
|——img
|——js
| common.js
|
|____modules
|——login
| | loginModule.js //登陆模块定义
| |
| |——css
| |——js
| | directives.js
| | filters.js
| | controllers.js
| |
| |____views
| login.html
|____register
| registerModule.js //注册模块定义
|
|——css
|——js
| directives.js
| filters.js
| controllers.js
|____views
register.html