使用模块定义AngularJS组件

一、模块创建/查找 module

当创建一个模块时，必须指定name和requires参数，即使你的模块并不存在依赖

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

如果没有requires参数，则为查找该模块

var myApp=angular.module("exampleApp");

二、定义控制器 controller

myApp.controller("dayCtrl",function($scope){
    // do something
})

控制器是用module.controller方法来定义的，该方法接收两个参数：控制器名称和一个工厂函数。

在创建控制器时提供的参数$scope组件是用于向视图提供数据的，而且只有通过$scope配置的数据才能用于表达式和数据绑定中。

三、定义指令 directive

调用module.directive方法，提供要创建的指令的名称以及一个用于创建指令的工厂函数即可。

myApp.directive("directiveName",function(){
// 工厂函数
   return function(scope,element,attrs){
       // 工人函数
    }
})

不能够依赖于工厂函数或工人函数在某个特定时刻被调用。当你想注册一个构件时，你得调用module方法（此处是directive方法）。当建立构件时angularjs将调用工厂函数，然后当需要使用该构件时就会调用工人函数，这三个事件不一定按顺序立即调用（也就是说，在你的工厂函数被调用前其他module方法有可能被调用，在你的工人函数被调用前其他工厂函数也有可能被调用）。

工人函数的三个参数分别为：scope视图的作用域，用于检查在视图中可用的数据，element指令所应用到的元素，是一个jqLite对象，attrs该元素的属性，提供了指令所应用到的元素的属性的完整集合。

四、定义过滤器 filter

filter方法用于定义一个过滤器，其参数是新过滤器的名称以及一个在调用时将会创建过滤器的工厂函数。过滤器本身就是函数，接受数据值并进行格式化，这样就可以显示该值了。

myApp.filter("filterName",function(){
    // 工厂函数
    return function(data){
        // 工人函数
    }
})

1）使用过滤器

过滤器应用在视图里所包含的模板表达式中。数据绑定或者表达式后紧跟一个竖线（“|”字符）以及过滤器的名称

{{day|filterName}}

2) 引入过滤服务$filter

向指令的工厂函数里添加一个$filter参数，用于告诉angular当我的函数被调用时要接收的过滤器服务对象。$filter服务允许我访问所有已定义的过滤器，包括自定义的过滤器，通过名称获取过滤器。

var f=$filter("filterName");

五、定义服务 service factory provider

服务是提供在整个应用程序中所使用的任何功能的单例对象。单例的意思是说只有一个对象实例会被angular创建出来，并被程序需要服务的各个不同部分所共享。

1）service

myApp.service("serviceName",function(){
    this.name="Mary";
    this.age="18";
})

service方法具有两个参数：服务名和调用后用来创建服务对象的工厂函数。当angular调用工厂函数时，会分配一个可通过this关键字访问的新对象。

2）value

module.value用于创建返回固定值和对象的服务。

myApp.value("valueName",value);

AngularJS假设工厂函数的任意参数都声明了需要解析的依赖。如下

var now=new Date();
myApp.service("days",function(now){
    this.today=now.getDay();
})

这段代码将报错，因为调用工厂函数时，Angular不会为now参数使用哪个局部变量，当引用now变量时它已经不再作用域中了。

因此你可以这样使用：

var now=new Date();
myApp.value("nowValue",now);
myApp.service("days",function(nowValue){
    this.today=nowValue.getDay();
})

或者 利用闭包

var now=new Date();
myApp.service("days",function(){
    this.today=now.getDay();
})

3) constant

这个方法与value类似，但是创建的服务可以作为config方法所声明的依赖使用（值服务却做不到这一点）

六、config & run

module.config和module.run方法注册了那些在angularJS应用的生命周期的关键时刻所调用的函数。传给config方法的函数在当前模块被加载后调用，config方法通常通过注入来自其他服务的值（比如链接的详细信息或者用户凭证）的方式用于配置模块。传给run方法的函数在所有模块被加载后以及解析完他们的依赖后才会被调用。

myApp.config(function(){

})
.run(function(){

})