0

0

谈谈AngularJS中Providers之间的差异

青灯夜游

青灯夜游

发布时间:2020-08-26 10:18:49

|

2198人浏览过

|

来源于segmentfault

转载

谈谈AngularJS中Providers之间的差异

相关教程推荐:《angular教程

什么是Provider?

angularjs文档对provider的定义:

provider是一个带有$get()方法的对象。injector调用$get方法创建一个新的service的实例。provider还有一些其他的方法,可以用来配置provider。

AngularJS使用$provide注册新的providers。providers基本上都会创建一个新实例, 但每个provider只创建一次。$provide提供了6种方法创建自定义provider, 我会用简单的代码示例分别解释他们。

6种方法如下:

  • constant

  • value

  • service

  • factory

  • decorator

  • provider

Constant

constant能被injected到任何地方。constant不能被decorator拦截, 意味着constant的值永远不能被改变。

var app = angular.module('app', []); 
app.config(function ($provide) {
  $provide.constant('movieTitle', 'The Matrix');
}); 

app.controller('ctrl', function (movieTitle) {
  expect(movieTitle).toEqual('The Matrix');
});

AngularJS提供了一种更简便的方式创建constant. 你可以将上面3至5行的代码重写为:

app.constant('movieTitle', 'The Matrix');

Value

value是一个简单的可被注入的值,可以是string, number, 也可以是function。
与constant不同的是:value不能被注入到configurations, 但value能被decorators拦截。

var app = angular.module('app', []); 
app.config(function ($provide) {
 $provide.value('movieTitle', 'The Matrix')
});

app.controller('ctrl', function (movieTitle) {
 expect(movieTitle).toEqual('The Matrix');
})

创建value的简单方法:

app.value('movieTitle', 'The Matrix');

Service

service是一个可以注入的构造函数。如果你想,你可以在函数中指定需要的依赖。

service是一个单例, 只被创建一次。services是一个很好的方式,用于控制器之间传递数据,如共享数据。

var app = angular.module('app' ,\[\]); 
app.config(function ($provide) {
 $provide.service('movie', function () {
   this.title = 'The Matrix';
 });
});

app.controller('ctrl', function (movie) {
 expect(movie.title).toEqual('The Matrix');
});

创建service简单方式:

Bing图像创建器
Bing图像创建器

必应出品基于DALL·E的AI绘图工具

下载
app.service('movie', function () {
 this.title = 'The Matrix';
});

Factory

factory是一个可注入的函数。

与service的相同点:factory也是一个单例,也可以在此函数中指定依赖。

区别是:factory注入一个普通函数,AngularJs将调用此函数,而service注入一个构造函数。

service是一个构造函数,要调用new创建一个新对象。而用factory,你可以让这个函数返回你想要的任何东西。
你将会看到,factory是一个只有$get方法的provider。

var app = angular.module('app', []); 
app.config(function ($provide) {
 $provide.factory('movie', function () {
   return {
     title: 'The Matrix';
   }
 });
}); 

app.controller('ctrl', function (movie) {
 expect(movie.title).toEqual('The Matrix');
});

创建factory的简单方式:

app.factory('movie', function () {
 return {
   title: 'The Matrix';
 }
});

Decorator

decorator可以修改或封装其它的providers,但constant不能被装饰。

var app = angular.module('app', []); 
app.value('movieTitle', 'The Matrix'); 
app.config(function ($provide) {
 $provide.decorator('movieTitle', function ($delegate) {
   return $delegate + ' - starring Keanu Reeves';
 });
});

app.controller('myController', function (movieTitle) {
 expect(movieTitle).toEqual('The Matrix - starring Keanu Reeves');
});

Provider

provider是所有providers中最复杂的,可以有复杂的creation函数和配置选项。

provider实际是一个可配置的factory。 provider接受一个对象或构造函数。

var app = angular.module('app', []); 
app.provider('movie', function () {
 var version;
 return {
   setVersion: function (value) {
     version = value;
   },
   $get: function () {
     return {
       title: 'The Matrix' + ' ' + version
     }
   }
 }
});

app.config(function (movieProvider) {
 movieProvider.setVersion('Reloaded');
});

app.controller('ctrl', function (movie) {
 expect(movie.title).toEqual('The Matrix Reloaded');
});

总结

所有的providers只会被实例化一次,因此他们都是单例的。

除了constant,其他的providers都可以被decorated。

constant是一个值, 可以被注入到任何地方,它的值不能被改变。

value是一个简单的可注入的值。

service是一个可注入的构造函数。

factory是以个可注入的函数。

decorator可以修改或封装其它的providers,除了constant。

provider是一个可配置的factory。

英文原文地址:https://xebia.com/blog/differences-between-providers-in-angularjs/

相关推荐:编程教学

相关专题

更多
高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

40

2026.01.16

全民K歌得高分教程大全
全民K歌得高分教程大全

本专题整合了全民K歌得高分技巧汇总,阅读专题下面的文章了解更多详细内容。

65

2026.01.16

C++ 单元测试与代码质量保障
C++ 单元测试与代码质量保障

本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法,包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程,以及常见代码质量问题的发现与修复。通过工程化示例,帮助开发者建立 可测试、可维护、高质量的 C++ 项目体系。

21

2026.01.16

java数据库连接教程大全
java数据库连接教程大全

本专题整合了java数据库连接相关教程,阅读专题下面的文章了解更多详细内容。

33

2026.01.15

Java音频处理教程汇总
Java音频处理教程汇总

本专题整合了java音频处理教程大全,阅读专题下面的文章了解更多详细内容。

16

2026.01.15

windows查看wifi密码教程大全
windows查看wifi密码教程大全

本专题整合了windows查看wifi密码教程大全,阅读专题下面的文章了解更多详细内容。

56

2026.01.15

浏览器缓存清理方法汇总
浏览器缓存清理方法汇总

本专题整合了浏览器缓存清理教程汇总,阅读专题下面的文章了解更多详细内容。

15

2026.01.15

ps图片相关教程汇总
ps图片相关教程汇总

本专题整合了ps图片设置相关教程合集,阅读专题下面的文章了解更多详细内容。

9

2026.01.15

ppt一键生成相关合集
ppt一键生成相关合集

本专题整合了ppt一键生成相关教程汇总,阅读专题下面的的文章了解更多详细内容。

26

2026.01.15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
AngularJS教程
AngularJS教程

共24课时 | 2.7万人学习

走进 ES6 新标准语法
走进 ES6 新标准语法

共15课时 | 1.5万人学习

AngularJS 中文手册
AngularJS 中文手册

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号