Angular应用是由许多对象组成,这些对象根据一定的关系被关联在一起,大多数情况下我们并不需要关心它们是如何被组织在一起,以及相互之间是如何进行协作的,但想要更亲近angular,就必须了解这一过程。
大体上来说angular的对象可以被分为两类,一类是像services这种由开发者定义的,用来提供应用所需要的公共API,一类是由angular框架定义好的具有特定用途的对象,比如controller、filter、directive等。那么这些对象是如何被定义出来的?除了injector外别无它法,但是对于injector来说,它需要知道如何去定义这些对象,对于内置的那些对象来说,我们当然不需要插手,angular为此暴露了5个API,分别是value(),service(),factory(),constant(),以及最为强大的provider(),前四个其实就是provider()的语法糖。虽然对象的创建是由injector来完成,但这5个方法却是angular模块的方法,也就是说我们在调用的时候需要在模块上去调用,例1:
- var myModule = angular(“myModule”,[]);
- myModule.value(“name”,”superMan”);
在angular中,所有的服务都是单例对象,也就是说它们只会被调用一次,之后在injector中会保存服务的引用,在需要的时候将其当作依赖注入进去。
一、value()
例1中我们已经定义了一个服务,那么我们就可以在任何需要的时候把它注入到我们的控制器中,例2:
- myModule.controller(“myController”,[“name”,function(name){
- this.name = name;
- }]);
- <body ng-controller = “myController as con”>
- Name:{{con.name}}
- </body>
这样我们就可以成功的拿到这个注册的名字”superMan”,并且可以在视图中正确的读到它。
它就是如此的简单。
二、constant()
这个方法和value()一样的简单,唯一的不同是,constant()注册的值可以在angular运行的配置阶段访问到。例3:
angular应用的生命周期被分为配置和运行两大阶段,在配置阶段,我们所写的服务都还没有注册进来,所以在这个时候去访问通过value()方法注册的值,是不可访问到的。当然constant()注册的值在运行阶段也是可以被正确的访问的。也就是说它们一个是全周期可见,一个是只有运行阶段可见。
三、factory()
以上两个方法都非常的简单,注册的值也一样的简单,实际情况中我们需要一些更为复杂的服务来提供更加健全的功能。Factory()同它们相比具有更强的能力,1、通过依赖注入可以引用到其它的服务。2、初始化服务。3、延迟加载服务,也就是说在需要的时候angular才去初始化。例4:
- myModule.factory("name",function nameFactory(){
- return "superMan";
- });
我们将例1中通过value()注册的值用factory()重写,这里我们用到了函数,这个函数可以接受一个或多个参数,只要这些参数已经被angular注册,它们就能被当作依赖被正确的加载进来,函数的返回值将被作为服务的实例被其引用到。这就给我们提供了更多的可能,我们可以返回一个简单值 ,当然也可以返回个对象或函数,总之看你需要。例5:
- myModule.factory("fullName",["name",function fullNameFactory(name){
- var firstName = "XX";
- var fn = function(f,l){
- return f + l;
- }
- return {
- name:fn(firstName,name)
- }
- }]);
在这里,函数的名字不是必须的,但是最好给它起一个能够很容易辨识的名字,这在调试程序时将会非常有用,一旦出错,你可以很轻易的在堆栈追踪中发现它。
四、service()
在面向对象的开发中,我们经常会用到自定义的类,当然,我们可以使用factory()方法来把这些类注册为服务,例6:
- function Person(name){
- this.name = name;
- this.speak = function(){
- console.log("my name is " + this.name);
- }
- }
- myModule.factory("person",function person(name){
- return new Person(name);
- }]);
在创建服务时,service()方法和factory()方法唯一的不同之处就是它使用new运算符来给我们实例化一个对象,也就是这个时候我们应该给service()传入一个构造函数,构造函数可以接受0个或多个参数,这些参数从哪来?当然是依赖注入,既然在factory()中我们都可以依赖注入,在service()中当然也可以,用service()来重写例6:
- myModule.service("person",Person]);
一目了然,无需多言。
五、provider()
前面说过,以上4种方法都是provider()的语法糖,也就是说上面4种方法具有的能力,provider()都具有。Providr()的能力是最强大的,但在实际开发中有时候会显的矫枉过正,永远记住,只选最适合你的。
对于provider()而言,它必须有一个$get()方法,这是区别于上面4种方法最为明显的地方,对于$get()的参数,可能通过依赖注入来获取,这个函数就像factory()的工厂函数,实际上对于factory()而言,angular会自动给它的函数设置一个空的$get()方法。
另外,前面我们提到过angular应用生命周期的2个阶段,如同constant()方法,provider()方法当然也可以在配置阶段运行,因此,对于provider()它最适用的场景就是在应该启动前给我们暴露一些API,以便我们可以通过这些API对应用进行配置。它注册的服务应该是我们希望在不同的应用间可以重用,且服务的行为在各有应用间非常一致,或者说变化非常小。
例7:
- myModule.provider("speakName",function speakNameProvider(){
- var firstName = "";
- this.addFirstName = function(f){
- console.log(“my firstName is:” + f);
- firstName = f;
- }
- this.$get= ["name",function speakNameFactory(name){
- var fullName = firstName + name;
- return new Person(fullName);
- }];
- });
假如我们希望在应用配置阶段加上一个姓,那么就可以通过暴露的API实现
- myModule.config(["speakNameProvider",function(speakNameProvider){
- speakNameProvider.addFirstName("XXX");
- }]);
回到开头说的,angular的对象分为两类,对于我们可以定义的,前面已经介绍完了,对于angular已经内置的一些对象,我们在使用时候必须遵循它的规则,比如controller、directive、filter等。当然我们定义好的这些服务可以被作为依赖注入到这些特殊对象中,比如:
- myModule.directive("myName",function myName(name){
- return {
- restrict:"EA",scope:{},link:function(scope,ele,attrs){
- ele.text("name:" + name);
- }
- }
- }]);