摘要:代碼代碼功夫瑜伽語法糖功夫瑜伽它是一個可注入的構(gòu)造器在中它是單例的用它在中通信或者共享數(shù)據(jù)都合適功夫瑜伽語法糖功夫瑜伽注意在里面可以不用返回東西因為會調(diào)用關(guān)鍵字來創(chuàng)建對象。
AngularJS 的供應(yīng)商($provide)
$provide 服務(wù)負責(zé)告訴 AngularJS 如何創(chuàng)建一個新的可注入的東西: 即服務(wù)。
服務(wù)會被叫做供應(yīng)商的東西來定義, 可以使用 $provide 來創(chuàng)建一個供應(yīng)商。
創(chuàng)建供應(yīng)商的方法:
使用 $provide 中的 provider() 方法來定義一個供應(yīng)商;
通過要求 $provide 被注入一個應(yīng)用的 config 函數(shù)中來獲得 $provide 服務(wù);
定義供應(yīng)商的方法們constant
value
service
factory
provider
decorator
1. constant定義常量的, 它定義的值不能被改變, 它可以被注入到任何地方, 但是不能被裝飾器(decorator) 裝飾。
DEMO:
HTML 代碼:
demo
JS 代碼:
var myApp = angular.module("myApp", []) myApp.config(function($provide) { $provide.constant("movieTitle", "功夫瑜伽") }) myApp.controller("myController", function(movieTitle) { console.log("movieTitle: ", movieTitle); })
語法糖:
myApp.constant("movieTitle", "功夫瑜伽")2. value
它可以是 string、 number、 function, 它和 constant 的不同之處在于, 它可以被修改, 不能被注入到 config 中, 但是它可以被 decorator 裝飾。
HTML 代碼:
demo
JS 代碼:
var myApp = angular.module("myApp", []) myApp.config(function($provide) { $provide.value("movieTitle", "功夫瑜伽") }) myApp.controller("myController", function(movieTitle) { console.log("movieTitle: ", movieTitle); })
語法糖:
myApp.value("movieTitle", "功夫瑜伽")3. service
它是一個可注入的構(gòu)造器, 在 AngularJS 中它是單例的, 用它在 Controller 中通信或者共享數(shù)據(jù)都合適
var myApp = angular.module("myApp", []) myApp.config(function($provide) { $provide.service("movie", function() { this.title = "功夫瑜伽" }) }) myApp.controller("myController", function(movie) { console.log("movieTitle: ", movie.title); })
語法糖:
myApp.service("movie", function () { this.title = "功夫瑜伽" })
注意:
在 service 里面可以不用返回東西, 因為 AngularJS 會調(diào)用 new 關(guān)鍵字來創(chuàng)建對象。但是返回一個自定義對象好像也不會有錯。
4. factory它是一個可注入的 function, 它和 service 的區(qū)別就是: factory 是普通的 function, 而 service 是一個構(gòu)造器(constructor), 這樣 AngularJS 在調(diào)用 service 時會用 new 關(guān)鍵字, 而調(diào)用 factory 時只是調(diào)用普通的 function, 所以 factory 可以返回任何東西, 而 service 可以不返回 (可查閱 new 關(guān)鍵字的作用)
var myApp = angular.module("myApp", []) myApp.config(function($provide) { $provide.factory("movie", function() { return { title: "功夫瑜伽" } }) }) myApp.controller("myController", function(movie) { console.log("movieTitle: ", movie.title); })
語法糖:
$provide.factory("movie", function() { return { title: "功夫瑜伽" } })
注意:
factory 可以返回任何東西, 它實際上是一個只有 $get 方法的 provider
5. providerprovider 是他們的老大, 上面的幾乎(除了 constant) 都是 provider 的封裝, provider 必須有一個 $get 方法, 當(dāng)然也可以說 provider 是一個可配置的 factory。
JS 代碼:
var myApp = angular.module("myApp", []) myApp.provider("movie", function() { var version return { setVersion: function(value) { version = value }, $get: function() { return { title: "功夫瑜伽 " + version } } } }) myApp.config(function(movieProvider) { movieProvider.setVersion("正在熱播") }) myApp.controller("myController", function(movie) { console.log("movieTitle: ", movie.title); })
注意:
這里 config 方法注入的是 movieProvider, config 方法中只能注入供應(yīng)商(兩個例外是 $provide 和 $injector),用駝峰命名法寫成 movieProvider, AngularJS 會自動幫你注入它的供應(yīng)商。
movie 是一個供應(yīng)商
6.decoratordecorator 不是 provider, 它是用來裝飾其它 provider 的, 它不能裝飾 constant(因為 constant 不是通過 provider() 方法創(chuàng)建的)。
JS 代碼:
var myApp = angular.module("myApp", []) // myApp.value("movieTitle", "功夫瑜伽6") myApp.config(function($provide) { $provide.value("movieTitle", "功夫瑜伽7") $provide.decorator("movieTitle", function($delegate) { return $delegate + " - 測試" }) }) myApp.controller("myController", function(movieTitle) { console.log("movieTitle: ", movieTitle); })總結(jié)
所有的供應(yīng)商都只被實例化一次, 也就是說它們都是單例的
除了 constant, 所有的供應(yīng)商都可以被裝飾器(decorator)裝飾
value 就是一個簡單可注入的值
service 是一個可注入的構(gòu)造器
factory 是一個可注入的方法
decorator 可以修改或封裝其他的供應(yīng)商(除了 constant)
provider 是一個可配置的 factory
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/86877.html
摘要:引言看了很多文章可能還是不太說得出中的幾個創(chuàng)建供應(yīng)商的方法到底有啥區(qū)別,啥時候該用啥,之前一直傻傻分不清楚,現(xiàn)在來總結(jié)一下。 引言 看了很多文章可能還是不太說得出AngularJS中的幾個創(chuàng)建供應(yīng)商(provider)的方法(factory(),service(),provider())到底有啥區(qū)別,啥時候該用啥,之前一直傻傻分不清楚,現(xiàn)在來總結(jié)一下。 下文中泛指統(tǒng)一用中文,英文即為特...
摘要:首先創(chuàng)建我們的構(gòu)造函數(shù)這是一個典型的構(gòu)造函數(shù)。所以,我們首先知道的就是無論我們是否能夠在代碼里面看見,構(gòu)造函數(shù)是會返回一個對象的。 翻譯自 http://tylermcginnis.com/angularjs-factory-vs-service-vs-provider/ 當(dāng)你開始使用Angular的時候,你會發(fā)現(xiàn),你總是會讓你的控制器和作用域充滿各種不必要的邏輯。你應(yīng)該早點意識到一個...
摘要:同名模塊已經(jīng)初始化的模塊保存在一個叫的緩存對象中,是模塊名,是模塊對象。調(diào)用注入器的方法執(zhí)行模塊的所有方法。檢查該注入器中是否存在指定的服務(wù)。如果是數(shù)組,最后一個必須是的構(gòu)造函數(shù),前面的就是構(gòu)造函數(shù)的參數(shù)名。 模塊 模塊是指寫Angular應(yīng)用的代碼片段,這樣可以使代碼分離開來,因此代碼會更好維護,可讀和測試。還可以在module里定義代碼依賴關(guān)系,可以調(diào)用一個模塊,再在代碼中定義這個...
閱讀 2344·2021-11-23 09:51
閱讀 1999·2021-10-14 09:43
閱讀 2760·2021-09-27 13:35
閱讀 1144·2021-09-22 15:54
閱讀 2495·2021-09-13 10:36
閱讀 3785·2019-08-30 15:56
閱讀 3404·2019-08-30 14:09
閱讀 1711·2019-08-30 12:57