angular模块的方法

AngularJS并没有main方法,AngularJS使用模块的概念来代替main方法。

加载和依赖
模块加载动作发生在两个不同的阶段,这一点从函数名上面就可以反映出来,它们分别是Config代码块和Run代码块(或者叫做阶段)。

Config代码块
在这一阶段里面,AngularJS会连接并注册好所有数据源。
因此,只有数据源和常量可以注入到Config代码块中。
那些不确定是否已经初始化好的服务不能注入进来。

Run代码块
Run代码块用来启动你的应用。
为了避免在开始之后再对系统进行配置操作,只有实例和常量可以被注入到Run代码块中。
你会发现,在AngularJS中,Run代码块是与main方法最类似的东西。

快捷方法
利用模块可以做什么呢?我们可以用它来实例化控制器、指令、过滤器以及服务,但是利用模块类还可以做更多事情。
如下模块配置的API方法:

1.config(configFn)
利用此方法可以做一些注册工作,这些工作需要在模块加载时完成。

2.constant(name, object)
此方法会首先运行,所以你可以用它来声明整个应用范围内的常量,并且让它们在所有配置(config方法)和实例(后面的所有方法,例如controller、service等)方法中可用。它经常被用来在指令中提供默认配置。作为一个constant,我们放入其中的值将不会改变

3.controller(name,constructor)
它的基本作用是配置好控制器方便后面使用。

4.directive(name,directiveFactory)
可以使用此方法在应用中创建指令。

5.filter(name,filterFactory)
允许你创建命名的AngularJS过滤器

6.run(initializationFn)
如果你想要在APP启动之后执行某些操作,而这些操作需要在页面对用户可用之前执行,就可以使用此方法。
run的作用,相当于去初始化一些全局的数据,省略了控制器的环节,就可以直接把值挂载到全局作用域下。

7.value(name,object)
允许在整个应用中注册值。value service有点像是一个constant,但是它是可以被改变的。它也经常被用在一个指令上面,来进行配置。一个value service有点像是一个factory service的缩小版,它经常用来保存值但是我们不能在其中对值进行计算。

8.factory(name,factoryFn)
一个Factory是一个能够返回任何数据类型的service。
对于你如何创建它并没有什么要求,你仅仅需要在其中返回一些东西即可。
如果你有一个类或者对象,需要首先为它提供一些逻辑或者参数,然后才能对它初始化,那么你就可以使用这里的factory接口。
factory是一个函数,它负责创建一些特定的值(或者对象)。
我们来看一个greeter(打招呼)函数的实例,这个函数需要一条问候语来初始化:

function Greeter(salutation) {
this.greet = function(name) {
return salutation + ' ' + name;
};
}

// greeter函数示例如下:
myApp.factory('greeter', function(salut) {
return new Greeter(salut);
});

// 然后可以这样来调用它:
var myGreeter = greeter('Halo');

9.service(name,object)
factory和service之间的不同点在于,factory会直接调用传递给它的函数,然后返回执行的结果;
而service将会使用"new"关键字来调用传递给它的构造方法,然后再返回结果。
所以,前面的greeter Factory可以替换成下面这个greeter Service:

myApp.service('greeter', Greeter);

每当我们需要一个greeter实例的时候,AngularJS就会调用新的Greeter()来返回一个实例。

补充:下面两个例子是等价的

app.service('foo', function() {  
    var thisIsPrivate = "Private";  
        this.variable = "This is public";  
        this.getPrivate = function() {    
            return thisIsPrivate;  
        };
}); 

//如果我们已经有了一个类,并且我们想将它用在service中
//也可以这样写
app.service('foo3',Foobar);  
app.factory('foo2', function() {  
    return new Foobar();
});  

function Foobar() {  
    var thisIsPrivate = "Private";  
    this.variable = "This is public";  
    this.getPrivate = function() {    
        return thisIsPrivate;  
    };
} 

10.provider(name,providerFn)
provider是这几个方法中最复杂的部分(显然,也是可配置性最好的部分)。
provider中既绑定了factory也绑定了service,并且在注入系统准备完毕之前,还可以享受到配置provider函数的好处(也就是config块)。
我们来看看使用provider改造之后的greeter Service是什么样子:

myApp.provider('greeter', function() {
    var salutation = 'Hello';
    this.setSalutation = function(s) {
        salutation = s;
    }
    function Greeter(a) {
        this.greet = function() {
            return salutation + ' ' + a;
        }
    }
    this.$get = function(a) {
        return new Greeter(a);
    };
});

这样我们就可以在运行时动态设置问候语了(例如,可以根据用户使用的不同语言进行设置)。

var myApp = angular.module(myApp, [])
    .config(function(greeterProvider) {
        greeterProvider.setSalutation('Namaste');
    });

补充:上一个例子中补充的factory代码等价于下面的provider代码:

app.provider('foo', function() {   
    return {     
        $get: function() {
            var thisIsPrivate = "Private";      
                function getPrivate() {        
                    return thisIsPrivate;      
                }       
            return {        
                variable: "This is public",        
                getPrivate: getPrivate      
            };    
        }   
    }; 
});   

一个provider中应当有一个$get函数,其中的内容就是我们想要注入我们应用中的部分。
因此当我们将foo注入一个控制器时,我们实际上注入的是$get函数。

既然factory如此简单,那我们为什么还要使用provider呢?因为我们可以在config阶段配置一个provider。
我们可以编写下面的代码:

app.provider('foo', function() {
  var thisIsPrivate = "Private"; 
  return { 
    setPrivate: function(newVal) {
      thisIsPrivate = newVal;
    }, 
    $get: function() {
      function getPrivate() {
        return thisIsPrivate;
      } 
      return {
        variable: "This is public",
        getPrivate: getPrivate
      };
    }
  }; 
});
 
app.config(function(fooProvider) {
  fooProvider.setPrivate('New value from config');
});   

在这里我们将thisIsPrivate移到了我们的$get函数的外面,然后我们创建了一个setPrivate来在一个config函数中修改thisIsPrivate。
这比在factory中添加setter要容易,除此之外,我们可以用它来配置URL。

你可能感兴趣的:(angular模块的方法)