angular中如何創建出需要的service

keke 發布于2019-08-20 14:35 / 1547人閱讀

摘要：它就是如此的簡單。當然注冊的值在運行階段也是可以被正確的訪問的。也就是說它們一個是全周期可見，一個是只有運行階段可見。延遲加載服務，也就是說在需要的時候才去初始化。

扯淡的話----------作為一個老魔獸玩家，我很喜歡將寫代碼和玩游戲進行對比，在使用不同的框架時，就好像我們在切換天賦技能，拿盜賊來說，敏銳天賦有個技能叫暗影之舞（好久沒玩，不知道還在不），開了之后允許在非潛行狀態下使用潛行技能，比如偷襲，鎖喉什么的，這就好像在框架里我們需要知道哪個方法可以在什么狀態下使用，在什么時間用，比如盜賊內戰時，高手會用消失來躲致盲，在需要爆發時，賊們也會消失進入潛行來一波爆發。。。。。所以知道我們可以做什么，怎么樣做，什么時間做，是成為高手必須的修行，好了，廢話不多說，進入正題。

Angular應用是由許多對象組成，這些對象根據一定的關系被關聯在一起，大多數情況下我們并不需要關心它們是如何被組織在一起，以及相互之間是如何進行協作的，但想要更親近angular，就必須了解這一過程。
大體上來說angular的對象可以被分為兩類，一類是像services這種由開發者定義的，用來提供應用所需要的公共API，一類是由angular框架定義好的具有特定用途的對象，比如controller、filter、directive等。那么這些對象是如何被定義出來的？除了injector外別無它法，但是對于injector來說，它需要知道如何去定義這些對象，對于內置的那些對象來說，我們當然不需要插手，angular為此暴露了5個API，分別是value()，service()，factory()，constant()，以及最為強大的provider()，前四個其實就是provider()的語法糖。雖然對象的創建是由injector來完成，但這5個方法卻是angular模塊的方法，也就是說我們在調用的時候需要在模塊上去調用，例1：

var myModule = angular(“myModule”,[]); 
myModule.value(“name”,”superMan”);

在angular中，所有的服務都是單例對象，也就是說它們只會被調用一次，之后在injector中會保存服務的引用，在需要的時候將其當作依賴注入進去。
一、value()
例1中我們已經定義了一個服務，那么我們就可以在任何需要的時候把它注入到我們的控制器中，例2：

myModule.controller(“myController”,[“name”,function(name){
    this.name = name;
}]);

    Name:{{con.name}}

這樣我們就可以成功的拿到這個注冊的名字”superMan”，并且可以在視圖中正確的讀到它。
它就是如此的簡單。
二、constant()
這個方法和value()一樣的簡單，唯一的不同是，constant()注冊的值可以在angular運行的配置階段訪問到。例3：

myModule.constant(“prefix”,”ECS”);
myModule.config([“prefix”,function(pre){
    //這里的pre將會被正確的訪問
}]);
myModule.config([“name”,function(name){
    //這里去訪問name將會拋出錯誤，因為此時服務都還沒有被注冊
}]);

angular應用的生命周期被分為配置和運行兩大階段，在配置階段，我們所寫的服務都還沒有注冊進來，所以在這個時候去訪問通過value()方法注冊的值，是不可訪問到的。當然constant()注冊的值在運行階段也是可以被正確的訪問的。也就是說它們一個是全周期可見，一個是只有運行階段可見。
三、factory()
以上兩個方法都非常的簡單，注冊的值也一樣的簡單，實際情況中我們需要一些更為復雜的服務來提供更加健全的功能。Factory()同它們相比具有更強的能力，1、通過依賴注入可以引用到其它的服務。2、初始化服務。3、延遲加載服務，也就是說在需要的時候angular才去初始化。例4：

myModule.factory("name",function nameFactory(){
    return "superMan";
});

我們將例1中通過value()注冊的值用factory()重寫，這里我們用到了函數，這個函數可以接受一個或多個參數，只要這些參數已經被angular注冊，它們就能被當作依賴被正確的加載進來，函數的返回值將被作為服務的實例被其引用到。這就給我們提供了更多的可能，我們可以返回一個簡單值，當然也可以返回個對象或函數，總之看你需要。例5：

myModule.factory("fullName",["name",function fullNameFactory(name){
    var firstName = "XX";
    var fn = function(f,l){
        return f + l;
    }
    return {
        name:fn(firstName,name)
    }
}]);

在這里，函數的名字不是必須的，但是最好給它起一個能夠很容易辨識的名字，這在調試程序時將會非常有用，一旦出錯，你可以很輕易的在堆棧追蹤中發現它。
四、service()
在面向對象的開發中，我們經常會用到自定義的類，當然，我們可以使用factory()方法來把這些類注冊為服務，例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);
}]);

在創建服務時，service()方法和factory()方法唯一的不同之處就是它使用new運算符來給我們實例化一個對象，也就是這個時候我們應該給service()傳入一個構造函數，構造函數可以接受0個或多個參數，這些參數從哪來？當然是依賴注入，既然在factory()中我們都可以依賴注入，在service()中當然也可以，用service()來重寫例6：

myModule.service("person",[“name”,Person]);

一目了然，無需多言。
五、provider()
前面說過，以上4種方法都是provider()的語法糖，也就是說上面4種方法具有的能力，provider()都具有。Providr()的能力是最強大的，但在實際開發中有時候會顯的矯枉過正，永遠記住，只選最適合你的。
對于provider()而言，它必須有一個$get()方法，這是區別于上面4種方法最為明顯的地方，對于$get()的參數，可能通過依賴注入來獲取，這個函數就像factory()的工廠函數，實際上對于factory()而言，angular會自動給它的函數設置一個空的$get()方法。
另外，前面我們提到過angular應用生命周期的2個階段，如同constant()方法，provider()方法當然也可以在配置階段運行，因此，對于provider()它最適用的場景就是在應該啟動前給我們暴露一些API，以便我們可以通過這些API對應用進行配置。它注冊的服務應該是我們希望在不同的應用間可以重用，且服務的行為在各有應用間非常一致，或者說變化非常小。
例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);
    }];
});

假如我們希望在應用配置階段加上一個姓，那么就可以通過暴露的API實現

myModule.config(["speakNameProvider",function(speakNameProvider){
    speakNameProvider.addFirstName("XXX");
}]);

回到開頭說的，angular的對象分為兩類，對于我們可以定義的，前面已經介紹完了，對于angular已經內置的一些對象，我們在使用時候必須遵循它的規則，比如controller、directive、filter等。當然我們定義好的這些服務可以被作為依賴注入到這些特殊對象中，比如：

myModule.directive("myName",["name",function myName(name){
    return {
        restrict:"EA",
        scope:{},
        link:function(scope,ele,attrs){
            ele.text("name:" + name);
        }
    }
}]);

GPU云服務器云服務器 js中如何獲得后臺的數據 linux中如何掛載新加的硬盤網絡安全中的防火墻是如何定義的阿里云服務器中的進程如何刪除

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81763.html

AngularJS中的Provider們：Service和Factory等的區別

摘要：引言看了很多文章可能還是不太說得出中的幾個創建供應商的方法到底有啥區別，啥時候該用啥，之前一直傻傻分不清楚，現在來總結一下。引言看了很多文章可能還是不太說得出AngularJS中的幾個創建供應商(provider)的方法(factory(),service(),provider())到底有啥區別，啥時候該用啥，之前一直傻傻分不清楚，現在來總結一下。下文中泛指統一用中文，英文即為特...

jone5679 2019-08-21 10:37 評論0 收藏0
Angular 項目國際化

摘要：正如官網所說，項目國際化是一件具有挑戰性，需要多方面的努力持久的奉獻和決心的任務。本文將介紹項目的國際化方案，涉及靜態文件和文件文案的國際化。參考目錄的國際化在線例子國際化正如angular官網所說，項目國際化是一件具有挑戰性，需要多方面的努力、持久的奉獻和決心的任務。本文將介紹angular項目的國際化方案，涉及靜態文件(html)和ts文件文案的國際化。背景 Angular:...

cncoder 2019-08-21 18:39 評論0 收藏0
用gulp+mock實現前后端分離

摘要：當然需要的工具不只有這些，其他的一些可選工具還有文件壓縮壓縮時用到的文件重命名檢查一般編輯器自帶校驗提示工具等等，具體根據項目需要安裝。 gulp 前端自動化構建工具需要配置nodejs環境, 利用npm安裝全局gulp,安裝后可以輸入gulp指令。 npm install gulp -g 創建項目目錄、初始化npm包、gulp npm init gulp init 下載gul...

dailybird 2019-08-20 18:08 評論0 收藏0
這 5 個前端組件庫，可以讓你放棄 jQuery UI

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

1fe1se 2019-08-20 16:50 評論0 收藏0
用WijmoJS玩轉您的Web應用 —— Ionic

摘要：在之前的文章中，我們已經介紹了使用與三大框架結合搭建您的應用程序。使用創建應用程序。擴展閱讀用玩轉您的應用用玩轉您的應用用玩轉您的應用近期活動問卷調查揚帆萬里，因您前行使用反饋意見征集前言：在本文中，我們將著重介紹如何將WijmoJS與Ionic一起使用，來創建一款移動端支持優先、快捷高效的應用程序。在之前的文章中，我們已經介紹了使用WijmoJS與Angular、React、Vu...

fjcgreat 2019-08-22 18:17 評論0 收藏0