摘要:它就是如此的簡(jiǎn)單。當(dāng)然注冊(cè)的值在運(yùn)行階段也是可以被正確的訪問的。也就是說它們一個(gè)是全周期可見,一個(gè)是只有運(yùn)行階段可見。延遲加載服務(wù),也就是說在需要的時(shí)候才去初始化。
扯淡的話----------作為一個(gè)老魔獸玩家,我很喜歡將寫代碼和玩游戲進(jìn)行對(duì)比,在使用不同的框架時(shí),就好像我們?cè)谇袚Q天賦技能,拿盜賊來說,敏銳天賦有個(gè)技能叫暗影之舞(好久沒玩,不知道還在不),開了之后允許在非潛行狀態(tài)下使用潛行技能,比如偷襲,鎖喉什么的,這就好像在框架里我們需要知道哪個(gè)方法可以在什么狀態(tài)下使用,在什么時(shí)間用,比如盜賊內(nèi)戰(zhàn)時(shí),高手會(huì)用消失來躲致盲,在需要爆發(fā)時(shí),賊們也會(huì)消失進(jìn)入潛行來一波爆發(fā)。。。。。所以知道我們可以做什么,怎么樣做,什么時(shí)間做,是成為高手必須的修行,好了,廢話不多說,進(jìn)入正題。
Angular應(yīng)用是由許多對(duì)象組成,這些對(duì)象根據(jù)一定的關(guān)系被關(guān)聯(lián)在一起,大多數(shù)情況下我們并不需要關(guān)心它們是如何被組織在一起,以及相互之間是如何進(jìn)行協(xié)作的,但想要更親近angular,就必須了解這一過程。
大體上來說angular的對(duì)象可以被分為兩類,一類是像services這種由開發(fā)者定義的,用來提供應(yīng)用所需要的公共API,一類是由angular框架定義好的具有特定用途的對(duì)象,比如controller、filter、directive等。那么這些對(duì)象是如何被定義出來的?除了injector外別無它法,但是對(duì)于injector來說,它需要知道如何去定義這些對(duì)象,對(duì)于內(nèi)置的那些對(duì)象來說,我們當(dāng)然不需要插手,angular為此暴露了5個(gè)API,分別是value(),service(),factory(),constant(),以及最為強(qiáng)大的provider(),前四個(gè)其實(shí)就是provider()的語法糖。雖然對(duì)象的創(chuàng)建是由injector來完成,但這5個(gè)方法卻是angular模塊的方法,也就是說我們?cè)谡{(diào)用的時(shí)候需要在模塊上去調(diào)用,例1:
var myModule = angular(“myModule”,[]); myModule.value(“name”,”superMan”);
在angular中,所有的服務(wù)都是單例對(duì)象,也就是說它們只會(huì)被調(diào)用一次,之后在injector中會(huì)保存服務(wù)的引用,在需要的時(shí)候?qū)⑵洚?dāng)作依賴注入進(jìn)去。
一、value()
例1中我們已經(jīng)定義了一個(gè)服務(wù),那么我們就可以在任何需要的時(shí)候把它注入到我們的控制器中,例2:
myModule.controller(“myController”,[“name”,function(name){ this.name = name; }]); Name:{{con.name}}
這樣我們就可以成功的拿到這個(gè)注冊(cè)的名字”superMan”,并且可以在視圖中正確的讀到它。
它就是如此的簡(jiǎn)單。
二、constant()
這個(gè)方法和value()一樣的簡(jiǎn)單,唯一的不同是,constant()注冊(cè)的值可以在angular運(yùn)行的配置階段訪問到。例3:
myModule.constant(“prefix”,”ECS”); myModule.config([“prefix”,function(pre){ //這里的pre將會(huì)被正確的訪問 }]); myModule.config([“name”,function(name){ //這里去訪問name將會(huì)拋出錯(cuò)誤,因?yàn)榇藭r(shí)服務(wù)都還沒有被注冊(cè) }]);
angular應(yīng)用的生命周期被分為配置和運(yùn)行兩大階段,在配置階段,我們所寫的服務(wù)都還沒有注冊(cè)進(jìn)來,所以在這個(gè)時(shí)候去訪問通過value()方法注冊(cè)的值,是不可訪問到的。當(dāng)然constant()注冊(cè)的值在運(yùn)行階段也是可以被正確的訪問的。也就是說它們一個(gè)是全周期可見,一個(gè)是只有運(yùn)行階段可見。
三、factory()
以上兩個(gè)方法都非常的簡(jiǎn)單,注冊(cè)的值也一樣的簡(jiǎn)單,實(shí)際情況中我們需要一些更為復(fù)雜的服務(wù)來提供更加健全的功能。Factory()同它們相比具有更強(qiáng)的能力,1、通過依賴注入可以引用到其它的服務(wù)。2、初始化服務(wù)。3、延遲加載服務(wù),也就是說在需要的時(shí)候angular才去初始化。例4:
myModule.factory("name",function nameFactory(){ return "superMan"; });
我們將例1中通過value()注冊(cè)的值用factory()重寫,這里我們用到了函數(shù),這個(gè)函數(shù)可以接受一個(gè)或多個(gè)參數(shù),只要這些參數(shù)已經(jīng)被angular注冊(cè),它們就能被當(dāng)作依賴被正確的加載進(jìn)來,函數(shù)的返回值將被作為服務(wù)的實(shí)例被其引用到。這就給我們提供了更多的可能,我們可以返回一個(gè)簡(jiǎn)單值 ,當(dāng)然也可以返回個(gè)對(duì)象或函數(shù),總之看你需要。例5:
myModule.factory("fullName",["name",function fullNameFactory(name){ var firstName = "XX"; var fn = function(f,l){ return f + l; } return { name:fn(firstName,name) } }]);
在這里,函數(shù)的名字不是必須的,但是最好給它起一個(gè)能夠很容易辨識(shí)的名字,這在調(diào)試程序時(shí)將會(huì)非常有用,一旦出錯(cuò),你可以很輕易的在堆棧追蹤中發(fā)現(xiàn)它。
四、service()
在面向?qū)ο蟮拈_發(fā)中,我們經(jīng)常會(huì)用到自定義的類,當(dāng)然,我們可以使用factory()方法來把這些類注冊(cè)為服務(wù),例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); }]);
在創(chuàng)建服務(wù)時(shí),service()方法和factory()方法唯一的不同之處就是它使用new運(yùn)算符來給我們實(shí)例化一個(gè)對(duì)象,也就是這個(gè)時(shí)候我們應(yīng)該給service()傳入一個(gè)構(gòu)造函數(shù),構(gòu)造函數(shù)可以接受0個(gè)或多個(gè)參數(shù),這些參數(shù)從哪來?當(dāng)然是依賴注入,既然在factory()中我們都可以依賴注入,在service()中當(dāng)然也可以,用service()來重寫例6:
myModule.service("person",[“name”,Person]);
一目了然,無需多言。
五、provider()
前面說過,以上4種方法都是provider()的語法糖,也就是說上面4種方法具有的能力,provider()都具有。Providr()的能力是最強(qiáng)大的,但在實(shí)際開發(fā)中有時(shí)候會(huì)顯的矯枉過正,永遠(yuǎn)記住,只選最適合你的。
對(duì)于provider()而言,它必須有一個(gè)$get()方法,這是區(qū)別于上面4種方法最為明顯的地方,對(duì)于$get()的參數(shù),可能通過依賴注入來獲取,這個(gè)函數(shù)就像factory()的工廠函數(shù),實(shí)際上對(duì)于factory()而言,angular會(huì)自動(dòng)給它的函數(shù)設(shè)置一個(gè)空的$get()方法。
另外,前面我們提到過angular應(yīng)用生命周期的2個(gè)階段,如同constant()方法,provider()方法當(dāng)然也可以在配置階段運(yùn)行,因此,對(duì)于provider()它最適用的場(chǎng)景就是在應(yīng)該啟動(dòng)前給我們暴露一些API,以便我們可以通過這些API對(duì)應(yīng)用進(jìn)行配置。它注冊(cè)的服務(wù)應(yīng)該是我們希望在不同的應(yīng)用間可以重用,且服務(wù)的行為在各有應(yīng)用間非常一致,或者說變化非常小。
例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); }]; });
假如我們希望在應(yīng)用配置階段加上一個(gè)姓,那么就可以通過暴露的API實(shí)現(xiàn)
myModule.config(["speakNameProvider",function(speakNameProvider){ speakNameProvider.addFirstName("XXX"); }]);
回到開頭說的,angular的對(duì)象分為兩類,對(duì)于我們可以定義的,前面已經(jīng)介紹完了,對(duì)于angular已經(jīng)內(nèi)置的一些對(duì)象,我們?cè)谑褂脮r(shí)候必須遵循它的規(guī)則,比如controller、directive、filter等。當(dāng)然我們定義好的這些服務(wù)可以被作為依賴注入到這些特殊對(duì)象中,比如:
myModule.directive("myName",["name",function myName(name){ return { restrict:"EA", scope:{}, link:function(scope,ele,attrs){ ele.text("name:" + name); } } }]);
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/81763.html
摘要:引言看了很多文章可能還是不太說得出中的幾個(gè)創(chuàng)建供應(yīng)商的方法到底有啥區(qū)別,啥時(shí)候該用啥,之前一直傻傻分不清楚,現(xiàn)在來總結(jié)一下。 引言 看了很多文章可能還是不太說得出AngularJS中的幾個(gè)創(chuàng)建供應(yīng)商(provider)的方法(factory(),service(),provider())到底有啥區(qū)別,啥時(shí)候該用啥,之前一直傻傻分不清楚,現(xiàn)在來總結(jié)一下。 下文中泛指統(tǒng)一用中文,英文即為特...
摘要:正如官網(wǎng)所說,項(xiàng)目國際化是一件具有挑戰(zhàn)性,需要多方面的努力持久的奉獻(xiàn)和決心的任務(wù)。本文將介紹項(xiàng)目的國際化方案,涉及靜態(tài)文件和文件文案的國際化。參考目錄的國際化在線例子國際化 正如angular官網(wǎng)所說,項(xiàng)目國際化是一件具有挑戰(zhàn)性,需要多方面的努力、持久的奉獻(xiàn)和決心的任務(wù)。本文將介紹angular項(xiàng)目的國際化方案,涉及靜態(tài)文件(html)和ts文件文案的國際化。 背景 Angular:...
摘要:當(dāng)然需要的工具不只有這些,其他的一些可選工具還有文件壓縮壓縮時(shí)用到的文件重命名檢查一般編輯器自帶校驗(yàn)提示工具等等,具體根據(jù)項(xiàng)目需要安裝。 gulp 前端自動(dòng)化構(gòu)建工具 需要配置nodejs環(huán)境, 利用npm安裝全局gulp,安裝后可以輸入gulp指令。 npm install gulp -g 創(chuàng)建項(xiàng)目目錄、初始化npm包、gulp npm init gulp init 下載gul...
摘要:目前正在廣泛使用的框架之一就是。是一系列使用編寫的自定義控件,用于創(chuàng)建快速響應(yīng)式的和可擴(kuò)展的控件。的組件主要是使用,并提供了交互式,動(dòng)態(tài)和高度可定制的小部件。例如,演示了如何使用自定義控件,嵌套面板和其它元素。 在建立Web應(yīng)用時(shí),通常都需要用到一些有用的UI組件。無論應(yīng)用中需要的是日歷,滑塊,圖形或其它用于提升或簡(jiǎn)化用戶交互的組件,那么都面臨兩種選擇:要么自己來創(chuàng)建這些組件,要么使用...
摘要:在之前的文章中,我們已經(jīng)介紹了使用與三大框架結(jié)合搭建您的應(yīng)用程序。使用創(chuàng)建應(yīng)用程序。擴(kuò)展閱讀用玩轉(zhuǎn)您的應(yīng)用用玩轉(zhuǎn)您的應(yīng)用用玩轉(zhuǎn)您的應(yīng)用近期活動(dòng)問卷調(diào)查揚(yáng)帆萬里,因您前行使用反饋意見征集 前言: 在本文中,我們將著重介紹如何將WijmoJS與Ionic一起使用,來創(chuàng)建一款移動(dòng)端支持優(yōu)先、快捷高效的應(yīng)用程序。在之前的文章中,我們已經(jīng)介紹了使用WijmoJS與Angular、React、Vu...
閱讀 3233·2021-11-11 16:55
閱讀 2501·2021-10-13 09:39
閱讀 2427·2021-09-13 10:27
閱讀 2164·2019-08-30 15:55
閱讀 3093·2019-08-30 15:54
閱讀 3137·2019-08-29 16:34
閱讀 1829·2019-08-29 12:41
閱讀 1073·2019-08-29 11:33