成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

angular中如何創(chuàng)建出需要的service

keke / 1552人閱讀

摘要:它就是如此的簡(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

相關(guān)文章

  • AngularJSProvider們:Service和Factory等區(qū)別

    摘要:引言看了很多文章可能還是不太說得出中的幾個(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)一用中文,英文即為特...

    jone5679 評(píng)論0 收藏0
  • Angular 項(xià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:...

    cncoder 評(píng)論0 收藏0
  • 用gulp+mock實(shí)現(xiàn)前后端分離

    摘要:當(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...

    dailybird 評(píng)論0 收藏0
  • 這 5 個(gè)前端組件庫,可以讓你放棄 jQuery UI

    摘要:目前正在廣泛使用的框架之一就是。是一系列使用編寫的自定義控件,用于創(chuàng)建快速響應(yīng)式的和可擴(kuò)展的控件。的組件主要是使用,并提供了交互式,動(dòng)態(tài)和高度可定制的小部件。例如,演示了如何使用自定義控件,嵌套面板和其它元素。 在建立Web應(yīng)用時(shí),通常都需要用到一些有用的UI組件。無論應(yīng)用中需要的是日歷,滑塊,圖形或其它用于提升或簡(jiǎn)化用戶交互的組件,那么都面臨兩種選擇:要么自己來創(chuàng)建這些組件,要么使用...

    1fe1se 評(píng)論0 收藏0
  • 用WijmoJS玩轉(zhuǎn)您Web應(yīng)用 —— Ionic

    摘要:在之前的文章中,我們已經(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...

    fjcgreat 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<