AngularJs学习笔记(5)--模块(module)

http://xlows.blog.51cto.com/5380484/1425462

本文主要介绍一下angular中的模块

(1)什么是模块(module)

大部分应用都有一个主方法(main)用来实例化、组织、启动应用。

angularJS应用没有主方法，而是使用模块来声明应用应该如何启动。

模块允许通过声明的方式来描述应用中的依赖关系，以及如何进行组装和启动。

(2)Angular模块

模块是组织业务的一个框框，在一个模块当中定义多个服务。当引入了一个模块的时候，就可以使用这个模块提供的一种或多种服务了。

AngularJS本身的一个默认模块叫做ng，它提供了$http，$scope等服务

服务只是模块提供的多种机制中的一种，其它的还有指令(directive)，过滤器(filter)，及其它配置信息。

也可以在已有的模块中新定义一个服务，也可以先新定义一个模块，然后在新模块中定义新服务。

服务是需要显式的声明依赖(引入)关系的，让ng自动的做注入。

(3)Module优点

启动过程是声明式的，更容易懂

在单元测试是不需要加载全部模块的，因此这种方式有助于单元测试。

可以在特定情况的测试中增加额外的模块，这些模块能更改配置，能帮助进行端对端测试。

第三方代码可以作为可复用的module打包到angular中。

模块可以以任何先后或者并行的顺序加载(因为模块的执行本身是延迟的)。

(4)定义模块

angular.module(name,[requires],configFn);

configFn会在模块初始化时执行，可以在这里配置模块的服务。

例如

1

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

这里就定义好了一个模块。

同时可以定义属于这个模块的控制器：

1

2

3

myApp.controller('firstController',function($scope){

    $scope.name = '张三';

});

而在页面上需要设置ng-app来声明这个模块是管理哪一块区域的。

1

2

3

4

5

6

7

    <div ng-app="myApp">

 

        <div ng-controller="firstController">

            {{name}}

        </div>

 

    </div>

此时myApp模块就管理这个div。

至此模块的基本创建就完成了。