一. 模块化的好处
(1) 实现逻辑更清晰, 可读性强;
(2) 团队开发分工明确, 容易控制;
(3) 充分利用可以重用代码;
(4) 抽象出可公用的模块, 可维护性强;
(5) 模块化的遗留系统方便组装开发新的相似系统.
二. AngularJS 模块的定义
(1)angular 对象的 module() 使用方法:
- // 定义一个无依赖模块
- angular.module('appModule',[]);
- // 定义一个依赖 module1,module2 的模块
- angular.module('appModule',['module1','module2']);
(2)angular.module() 方法: 接收三个参数
第一个为模块的名称, 第二个是数组, 表示模块依赖的模块的名称. 如果不需要依赖其他模块, 传入空数组即可. 第三个参数可选, 接收一个方法, 用于对模块进行配置, 作用和模块实例的 config() 方法相同.
angular.module() 方法返回一个模块实例对象, 可以调用该对象的 controller(),directive(),filter() 等方法向模块中添加控制器, 指令, 过滤器等其他组件.
(3) 页面引用模块: ng-app 指令
<html ng-app="appMobile">
三. 使用模块解决命名冲突问题
两个页面共用一个 js 文件, 控制器的定义放在 common.js 中, 当两个页面定义的控制器名称相同时就会产生冲突, AngularJS 中通过使用模块化来解决命名冲突. 调用 angular.module() 方法创建两个模块实例, 分别调用这两个模块实例的 controller() 方法创建两个名称相同的控制器, 但这两个控制器属于不同的模块. 虽然 html 页面中的控制器名称都是 UserController, 但是分属于不同的模块, 因此避免了冲突.
- 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");
- }
- })
四. 模块化的最佳实践
假设项目名称: app, 包含 login 和 register 两个模块:
app
CSS---------------CSS 样式
img--------------- 图片资源
js----------------JS 代码
common.js // 公共 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
来源: http://www.jb51.net/article/137728.htm