angular中如何建立出须要的service

时间 2019-11-07

标签 angular 如何建立须要 service 栏目 AngularJS 繁體版

原文原文链接

扯淡的话----------做为一个老魔兽玩家，我很喜欢将写代码和玩游戏进行对比，在使用不一样的框架时，就好像咱们在切换天赋技能，拿盗贼来讲，敏锐天赋有个技能叫暗影之舞（很久没玩，不知道还在不），开了以后容许在非潜行状态下使用潜行技能，好比偷袭，锁喉什么的，这就好像在框架里咱们须要知道哪一个方法能够在什么状态下使用，在什么时间用，好比盗贼内战时，高手会用消失来躲致盲，在须要爆发时，贼们也会消失进入潜行来一波爆发。。。。。因此知道咱们能够作什么，怎么样作，什么时间作，是成为高手必须的修行，好了，废话很少说，进入正题。

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中会保存服务的引用，在须要的时候将其看成依赖注入进去。
1、value()
例1中咱们已经定义了一个服务，那么咱们就能够在任何须要的时候把它注入到咱们的控制器中，例2：ide

myModule.controller(“myController”,[“name”,function(name){
    this.name = name;
}]);
<body ng-controller = “myController as con”>
    Name:{{con.name}}
</body>

这样咱们就能够成功的拿到这个注册的名字”superMan”，而且能够在视图中正确的读到它。
它就是如此的简单。
2、constant()
这个方法和value()同样的简单，惟一的不一样是，constant()注册的值能够在angular运行的配置阶段访问到。例3：函数

myModule.constant(“prefix”,”ECS”);
myModule.config([“prefix”,function(pre){
    //这里的pre将会被正确的访问
}]);
myModule.config([“name”,function(name){
    //这里去访问name将会抛出错误，由于此时服务都尚未被注册
}]);

angular应用的生命周期被分为配置和运行两大阶段，在配置阶段，咱们所写的服务都尚未注册进来，因此在这个时候去访问经过value()方法注册的值，是不可访问到的。固然constant()注册的值在运行阶段也是能够被正确的访问的。也就是说它们一个是全周期可见，一个是只有运行阶段可见。
3、factory()
以上两个方法都很是的简单，注册的值也同样的简单，实际状况中咱们须要一些更为复杂的服务来提供更加健全的功能。Factory()同它们相比具备更强的能力，一、经过依赖注入能够引用到其它的服务。二、初始化服务。三、延迟加载服务，也就是说在须要的时候angular才去初始化。例4：this

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)
    }
}]);

在这里，函数的名字不是必须的，可是最好给它起一个可以很容易辨识的名字，这在调试程序时将会很是有用，一旦出错，你能够很轻易的在堆栈追踪中发现它。
4、service()
在面向对象的开发中，咱们常常会用到自定义的类，固然，咱们可使用factory()方法来把这些类注册为服务，例6：rest

function Person(name){
    this.name  = name;
    this.speak = function(){
        console.log("my name is " + this.name);
    }
}
myModule.factory("person",["name",function person(name){
    return new Person(name);
}]);

在建立服务时，service()方法和factory()方法惟一的不一样之处就是它使用new运算符来给咱们实例化一个对象，也就是这个时候咱们应该给service()传入一个构造函数，构造函数能够接受0个或多个参数，这些参数从哪来？固然是依赖注入，既然在factory()中咱们均可以依赖注入，在service()中固然也能够，用service()来重写例6：code

myModule.service("person",[“name”,Person]);

一目了然，无需多言。
5、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",["name",function myName(name){
    return {
        restrict:"EA",
        scope:{},
        link:function(scope,ele,attrs){
            ele.text("name:" + name);
        }
    }
}]);