angular中如何创建出需要的service

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

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：

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

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",["name",function person(name){return new Person(name);
}]);

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

myModule.service("person",[“name”,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",["name",function myName(name){return {restrict:"EA",scope:{},link:function(scope,ele,attrs){ele.text("name:" + name);}}
}]);

angular中如何创建出需要的service相关推荐

Angular中怎样创建service服务来实现组件之间调用公共方法
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
获取Angular中的AngularJS功能
介绍 ( Introduction ) If you have solid experience with AngularJS 1.x, you're well aware of the framew ...
Angular CDK Overlay 弹出覆盖物
为什么使用Overlay? Overlay中文翻译过来意思是覆盖物,它是Material Design components for Angular中针对弹出动态内容这一场景的封装,功能强大.使用方便 ...
angular 错误处理_可能出什么问题了？如何处理Angular中的错误
angular 错误处理 Approximately a year ago, I have implemented the first e2e tests on a project. It was a ...
在 Visual Studio 2010 中创建 ASP.Net Web Service
第一步:创建一个"ASP.Net Empty Web Application"项目第二步:在项目中添加"Web Service"新项目第一步之后,Visua ...
Angular 中的依赖注入link
Angular 中的依赖注入link 依赖注入(DI)是一种重要的应用设计模式. Angular 有自己的 DI 框架,在设计应用时常会用到它,以提升它们的开发效率和模块化程度. 依赖,是当类需要执行 ...
Spring中的@ Component，@ Repository和@Service批注有什么区别？
@Repository @Component , @Repository和@Service批注可以在Spring中互换使用吗,或者除了充当注解设备外,它们还提供任何特定功能吗? 换句话说,如果我有一个 ...
Angular中路由的嵌套-父子路由
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
Angular中调用css3动画实现侧边栏的显示与隐藏
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...

angular中如何创建出需要的service

angular中如何创建出需要的service相关推荐

最新文章

热门文章