AngularJS中可以通过angular.module函数来创建,在第二个参数中可以注入不用的模块,当一个应用程序多人协同开发时,这种需要体现的尤为明显。AngularJS推荐使用angular.module来定义不同模块。

1. 初始化主模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var bookStoreApp = angular.module('bookStoreApp', [
'ngRoute', 'ngAnimate', 'bookStoreCtrls', 'bookStoreFilters',
'bookStoreServices', 'bookStoreDirectives'
]);

bookStoreApp.config(function($routeProvider) {
$routeProvider.when('/hello', {
templateUrl: 'tpls/hello.html',
controller: 'HelloCtrl'
}).when('/list',{
templateUrl:'tpls/bookList.html',
controller:'BookListCtrl'
}).otherwise({
redirectTo: '/hello'
})
});

2. 定义子模块bookStoreServices(新建services.js,与app.js同目录)

1
2
3
4
5
6
7
8
9
var bookStoreServices = angular.module('bookStoreServices', []);

bookStoreServices.service('bookStoreService_1', ['$scope',
function($scope) {}
]);

bookStoreServices.service('bookStoreService_2', ['$scope',
function($scope) {}
]);

3. 定义子模块bookStoreDirectives(新建directives.js,与app.js同目录)

1
2
3
4
5
6
7
8
9
var bookStoreDirectives = angular.module('bookStoreDirectives', []);

bookStoreDirectives.directive('bookStoreDirective_1', ['$scope',
function($scope) {}
]);

bookStoreDirectives.directive('bookStoreDirective_2', ['$scope',
function($scope) {}
]);

其他模块的定义方式同理,这样更好地实现了不同模块的独立开发,然后在主模块中注入,实现应用程序的聚合。