溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編這次要給大家分享的是AngularJS中幾種Providers有什么區別，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
什么是Provider
AngularJS文檔對provider的定義:
provider是一個帶有$get()方法的對象。injector調用$get方法創建一個新的service的實例。provider還有一些其他的方法，可以用來配置provider。
AngularJS使用$provide注冊新的providers。providers基本上都會創建一個新實例, 但每個provider只創建一次。$provide提供了6種方法創建自定義provider, 我會用簡單的代碼示例分別解釋他們。
6種方法如下:
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簡單方式:
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。
看完這篇關于AngularJS中幾種Providers有什么區別的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
