资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/angular中如何创建出需要的service

angular中如何创建出需要的service

keke / 1421人阅读

摘要：它就是如此的简单。当然注册的值在运行阶段也是可以被正确的访问的。也就是说它们一个是全周期可见，一个是只有运行阶段可见。延迟加载服务，也就是说在需要的时候才去初始化。

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

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

    Name:{{con.name}}

这样我们就可以成功的拿到这个注册的名字”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);
        }
    }
}]);
海外云主机 云服务器 js中如何获得后台的数据 linux中如何挂载新加的硬盘 网络安全中的防火墙是如何定义的 阿里云服务器中的进程如何删除

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81763.html

相关文章

  • AngularJS中的Provider们：Service和Factory等的区别

    摘要：引言看了很多文章可能还是不太说得出中的几个创建供应商的方法到底有啥区别，啥时候该用啥，之前一直傻傻分不清楚，现在来总结一下。 引言 看了很多文章可能还是不太说得出AngularJS中的几个创建供应商(provider)的方法(factory(),service(),provider())到底有啥区别，啥时候该用啥，之前一直傻傻分不清楚，现在来总结一下。 下文中泛指统一用中文，英文即为特...

    jone5679 评论0 收藏0

  • Angular 项目 国际化

    摘要：正如官网所说，项目国际化是一件具有挑战性，需要多方面的努力持久的奉献和决心的任务。本文将介绍项目的国际化方案，涉及静态文件和文件文案的国际化。参考目录的国际化在线例子国际化 正如angular官网所说，项目国际化是一件具有挑战性，需要多方面的努力、持久的奉献和决心的任务。本文将介绍angular项目的国际化方案，涉及静态文件(html)和ts文件文案的国际化。 背景 Angular:...

    cncoder 评论0 收藏0

  • 用gulp+mock实现前后端分离

    摘要：当然需要的工具不只有这些，其他的一些可选工具还有文件压缩压缩时用到的文件重命名检查一般编辑器自带校验提示工具等等，具体根据项目需要安装。 gulp 前端自动化构建工具 需要配置nodejs环境, 利用npm安装全局gulp,安装后可以输入gulp指令。 npm install gulp -g 创建项目目录、初始化npm包、gulp npm init gulp init 下载gul...

    dailybird 评论0 收藏0

  • 这 5 个前端组件库，可以让你放弃 jQuery UI

    摘要：目前正在广泛使用的框架之一就是。是一系列使用编写的自定义控件，用于创建快速响应式的和可扩展的控件。的组件主要是使用，并提供了交互式，动态和高度可定制的小部件。例如，演示了如何使用自定义控件，嵌套面板和其它元素。 在建立Web应用时，通常都需要用到一些有用的UI组件。无论应用中需要的是日历，滑块，图形或其它用于提升或简化用户交互的组件，那么都面临两种选择：要么自己来创建这些组件，要么使用...

    1fe1se 评论0 收藏0

  • 用WijmoJS玩转您的Web应用 —— Ionic

    摘要：在之前的文章中，我们已经介绍了使用与三大框架结合搭建您的应用程序。使用创建应用程序。扩展阅读用玩转您的应用用玩转您的应用用玩转您的应用近期活动问卷调查扬帆万里，因您前行使用反馈意见征集 前言： 在本文中，我们将着重介绍如何将WijmoJS与Ionic一起使用，来创建一款移动端支持优先、快捷高效的应用程序。在之前的文章中，我们已经介绍了使用WijmoJS与Angular、React、Vu...

    fjcgreat 评论0 收藏0

发表评论

登陆后可评论

0条评论

keke

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<