AngularJS模块

标签（空格分隔）： AngularJS

---

AngularJS框架在window对象下新增了一个全局的angular对象，可以通过调用angular对象的module方法来返回一个模块实例：
//定义一个无依赖的模块
angular.module(‘appModule’,[]);
//定义一个依赖另外两个模块的模块
angular.module(‘appModule’,[‘module1’,’module2’]);

angular.module()方法可以接受三个参数，第一个为模块名，第二个指定该模块依赖的模块名称，第三个参数接受一个方法，用于对模块进行配置，和模块实例的config方法等同。

angular.module()方法返回一个模块实例对象，我们可以使用该对象的controller(),directive(),filter()等方法向该模块添加控制器，指令和过滤器等其他组件。

模块定义完后，通过 来为HTML页面添加对此模块的引用。

使用模块解决命名冲突的问题：
先编写一个登陆页面：



登录页面

用户名：

密　码：

登录

这个页面中它引用了common.js文件，也引用了UserController的控制器，这个控制器定义在JS文件中。

下面定义一个注册页面：



注册页面

用户名：

密　码：

注册

这个注册页面也引用了同一个JS文件中控制器，如果这两个文件所属于同一个模块中，则在执行到

处时就会创建同一个名字的控制器对象，破坏了这两个业务功能独立的原则，为此，把它们分别用两个模块实例进行区分就可以有效的解决这个问题，它们分别创建不同的模块实例下的控制器对象。在JS文件中写作：
var loginModule = angular.module(“loginModule”,[]);
loginModule.controller(“UserController”,function(scope,log){

$scope.uname = "login";$scope.pword = "admin";$scope.submit = function() {    alert("登录模块：UserController");}

});

var registerModule = angular.module(“registerModule”,[]);
registerModule.controller(“UserController”,function(scope,log){
scope.uname=“register”;scope.pword = “admin”;
$scope.submit = function() {
alert(“注册模块：UserController”);
}
});

分别创建了两个模块实例和定义了每个实例下的控制器。