angular-模块-启动

1.模块

在angularjs中，模块是定义应用的最主要方式。

1.1 声明模块

angular.module(name,requires);

● name：模块的名称，字符串变量

● requires：字符串数组

                     每个元素都是一个模块名称，本模块依赖于这些模块，依赖需要在本模块加载之前由注入器进行预加载

例：

angular.module('app',[]); //声明模块（相当于angularjs模块的setter方法）

angular.module('app'); //引用模块（只传递一个参数，相当于angularjs模块的getter方法）

1.2 多模块的加载

一个应用可以包含多个模块，此时启动angularjs只能用手动方式,html标签上不用加ng-app,而直接加ng-controller即可

var app1 = angular.module("myApp1",[]);
app1.controller("myCtrl1",function($scope){
	$scope.moduleName="module1";
});

var app2 = angular.module("myApp2",[]);
app2.controller("myCtrl2",function($scope){
	$scope.moduleName="module2";
});

angular.bootstrap(document.getElementById('div1'),['myApp1']);
angular.bootstrap(document.getElementById('div2'),['myApp2']);

1.3 模块细化

适用于大型开发

1.3.1 函数模块化

好处：

● 可以在逻辑中分解函数的类型

● 可以延迟加载应用程序的不同部分

● 一次编写模块就可跨应用程序共享它们

例：当编写一个包含主页路由和登录路由的应用时，可以构建两个模块来交付完全分离的功能

angular.module('app',[

        'app.home',

        'app.login'

]);

1.3.2 功能的模块化（推荐）

angular.module("myApp.directives",[]);
angular.module("myApp.services",[]);
angular.module("myApp.filters",[]);

//我们经常在控制器中使用服务，所以把它们注入到myApp.controllers模块中
angular.module('myApp.controllers',[
'myApp.services'
]);

angular.module("myApp",[
'myApp.directives',
'myApp.controllers',
'myApp.filters',
'myApp.services'
]);

2.启动angularjs

2.1 在元素上添加ng-app指令,调用模块

ng-app可以有属性值（ng-app="app"），这样的话就需要咱们去写一个名为app的module了，后续详解。

ng-app是angular的一个指令，代表一个angular应用（也叫模块）。

2.2 不去指定ng-app，通过angular.bootstrap()手动启动

angular.bootstrap(element, ['模块名'...])

比如：angular.bootstrap(document, [myModule.name]);）