AngularJs之模块化

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

Angularjs

1. 初始化主模块

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同目录）

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同目录）

var bookStoreDirectives = angular.module('bookStoreDirectives', []);

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

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

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