Angular如何创建服务？5种方式了解一下！-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

本篇文章给大家介绍一下Angular创建服务的5种方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

config配置块

Angular应用的运行主要分为两部分：app.config()和app.run()，config是你设置任何的provider的阶段，从而使应用可以使用正确的服务，需要注意的是在配置块中只有provider能被注入（只有两个例外是$provide和$injector)。而且provider也只能在config中注入。Angular注入服务的5种方式中，只有通过provider和constant注入的服务可以在依赖到config中。

app.controller('MyController', function ($httpProvider) {
    //错误，无法在控制器中注入服务提供者
});
app.config(function ($http) {
    //错误，配置块中只能注入服务
});

关于一些内置的服务

控制器函数是可以被注入的，但是控制器本身是不能被注入到任何东西里面去的，然而，有一个内建的AngularJS服务叫做$controller，它负责设置你的控制器，调用myMod.controller(…)时，你实际上是访问了这个服务的provider。

代码：

myMod.controller('MainController', function($scope) {
  // ...
});

实际上做了以下事情：

myMod.config(function($controllerProvider) {
  $controllerProvider.register('MainController', function($scope) {
// ...
  });
});

类似的还有filter和directive，filter会使用一个叫做$filter的服务以及它的provider $filterProvider，而directive使用一个叫做$compile的服务以及它的provider $compileProvidr。

服务的5中注入方式

factory()

依赖注入器将使用factory函数创建服务的实例，工厂函数返回一个对象。

myModule.factory('myService', function () {
    var myService = {};
    //添加myService的一些属性和方法
    return myService;
});

service()

service注入通过传递一个函数给service，然后使用javascript的new操作生成一个服务，也就是说将属性附加到this上即可，使用这个方法要小心javascript的this陷阱，this并不总是指向执行函数本身，也可能指向顶级对象window。

myModule.service('myService', function () {
    this.foo = 'bar';
});

provider()

实际上以上我们提到的factory和service被实现为provider上的语法糖，通过provider注入的服务可以作为提供者在配置块中使用，另外provider必须实现一个$get属性。

阅读剩余部分

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » Angular如何创建服务？5种方式了解一下！

Angular如何创建服务？5种方式了解一下！