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

10 篇文章 0 订阅


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。

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


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值