angularjs 服務

来源:https://www.cnblogs.com/chaixiaozhi/archive/2018/02/24/8463985.html
-Advertisement-
Play Games

一、服務 服務提供了一種能在應用的整改生命周期內保持數據的方法,它能夠在控制器之間進行通信,並保持數據的一致性。 1.服務是一個單例對象,在每個應用中只會被實例化一次(被$injector); 2.服務提供了把與特定功能相關連的方法集中在一起的介面,實際中用於封裝通用方法,請求後臺數據,處理數據返回 ...


一、服務

服務提供了一種能在應用的整改生命周期內保持數據的方法,它能夠在控制器之間進行通信,並保持數據的一致性。

1.服務是一個單例對象,在每個應用中只會被實例化一次(被$injector);

2.服務提供了把與特定功能相關連的方法集中在一起的介面,實際中用於封裝通用方法,請求後臺數據,處理數據返回給控制器;

3.服務被註冊後就可以引用它,併在運行時把它當做依賴載入進來。

 

二、創建服務的5種方式

1.factory服務

factory()方法是創建和配置服務的最快捷方式。

app.factory('name',function(){return obj})

name為服務的名字,第二個參數傳入一個函數,函數需要有一個返回值obj,返回一個對象.實際被註入的服務就是這個對象.

serviceApp.factory('myConfig',function(){
    var myname = 'code_bunny';
    var age = 12;
    var id = 1;
    return {
        name: myname,
        age: age,
        getId: function(){
            return id
        }
    }
});

 

2.service服務

使用service()可以註冊一個支持構造函數的服務

app.service('name',constructor)

name為服務的名字,constructor是一個構造函數.

serviceApp.service('myConfig',function(){
    var myname = 'code_bunny';
    var age = 12;
    var id = 1;
    this.name = myname;
    this.age = age;
    this.getId = function(){
        return id
    }
});

 

3.provider服務

所以服務工廠都是由$provide服務創建的,所有創建服務的方法都是構建在provider方法之上。

name為服務的名字,第二個參數接受一個函數,函數返回一個對象,返回的對象比如要有$get方法,$get方法必須要返回一個對象obj,這個對象就是真正被註入的服務.

provider服務的第二個參數的返回值中必須要有$get方法(除了$get,還可以有其它方法,後面的例子會說到),$get方法就相當於factory服務的第二個參數,最後要返回一個對象,這個對象就是真正被註入的服務:

app.provider('name',function(){
  ....
  return {
    ...
    $get:function(){
      ...
      return obj
    }
     }
})

 

serviceApp.provider('myConfig',function(){
   return {
       $get:function(){
           var myname = 'code_bunny';
           var age = 12;
           var id = 1;
           return {
               name: myname,
               age: age,
               getId: function(){
                   return id
               }
           }
       }
   }
});

 

這兩種寫法和之前是一樣的,之前的可以看成是它的簡略寫法。

我們只有希望在config()函數中對服務進行配置時,那就必須使用provider()來定義服務了。

serviceApp.provider('myConfig',function(){
    var id = 1;
    return {
        setID:function(newID){
            id = newID
        },
        $get:function(){
            var myname = 'code_bunny';
            var age = 12;
            return {
                name: myname,
                age: age,
                getId: function(){
                    return id
                }
            }
        }
    }
});
serviceApp.config(function(myConfigProvider){
    myConfigProvider.setID(2)
});

說明:

這裡的provider服務不僅僅返回了$get方法,還返回了setID方法,然後id變數是寫在函數里的,返回值的外面,形成一個閉包,可以被修改.

然後,在provider服務里定義的方法,可以在config函數里調用.註意調用的格式:

serviceApp.config(function(myConfigProvider){
    myConfigProvider.setID(2)
});

被註入的服務名不叫myConfig,而是myConfigProvider.然後在函數裡面可以調用myConfigProvider的setID方法(也就是myConfig的setID方法).

通過這種方式,使得我們的服務可以被手動配置,比如這裡可以配置id.

ng有很多內置的服務都有這樣的功能,比如$route服務,$location服務,當我們通過$routeProvider和$locationProvider來配置的時候,其本質就是這些服務是通過provider創建的.

 

4.constant服務

constant()一般將常量保存下來

app.constant('name',obj)

name為服務的名字,obj為一個json對象.

serviceApp.constant('myConfig',{
    name:'code_bunny',
    age:12,
    getId:function(){
        return 1
    }
});

constant創建服務返回一個json對象(也就是第二個參數中傳入的對象),這個對象里可以有參數,可以有方法,並且,屬性和方法都可以在控制器中修改,新增,但是按照它的設計本意,一般constant創建的服務不會去修改它的內容,需要修改內容,最好用value來創建服務. 

 

5.value服務

app.value('name',obj)

name為服務的名字,obj為一個json對象.

serviceApp.value('myConfig',{
    name:'code_bunny',
    age:12,
    getId:function(){
        return 1
    }
});

value創建服務返回一個json對象(也就是第二個參數中傳入的對象),這個對象里可以有參數,可以有方法,並且,屬性和方法都可以在控制器中修改,新增,按照它的設計本意,如果屬性和方法需要被修改內容,就用value來創建服務. 

constant和value主要就是用於存放一些數據或方法以供使用,區別是constant一般是存放固定內容,value存放可能會被修改的內容

 

6.裝飾服務decorator

$provide服務提供了在服務實例創建時對其進行攔截的功能,可以對服務進行擴展或者替代等。

serviceApp.value('myConfig',{
    name:'code_bunny',
    age:12,
    getId:function(){
        return 1
    }
});
serviceApp.config(function($provide){
    $provide.decorator('myConfig',function($delegate){
        $delegate.money = '100w';
        return $delegate
    })
});

同樣是通過config,在參數函數中註入$provider服務,$provider服務有個decorator方法,它接受兩個參數,第一個參數'name',是要被裝飾的服務的名字,第二個參數是一個函數,函數中註入$delegate,$delegate就是被裝飾的服務的實例,然後在函數中操作$delegate,就相當於操作了該服務的實例.

註意:

1.最後一定要return $delegate,這樣服務才算被裝飾完成了.

2.constant服務是不能被裝飾的.

 

總結上面的內容:

1.服務的實例被註入到控制器以後,都是一個引用對象,無論被註入多少個控制器中,實際都指向同一個對象,所以,無論修改其中的哪一個,其它所有的服務都會被改變.

2.服務的實例被修改過後,ng不會自動同步,需要使用$scope.$watch()監測其變化並手動刷新視圖.

3.constant服務不能通過decorator進行裝飾.

4.一些固定的參數和方法,使用constant

5.可能被修改的參數和方法,使用value

6.通過邏輯處理後得到的參數或方法,使用factory

7.可以使用factory的也可以使用service,反之亦然(一般就是用factory)

8.可以手動配置參數的服務,使用provider

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一直自以為自己vue還可以,一直自以為webpack還可以,今天在慕課逛node的時候,才發現,自己還差的很遠。眾所周知,vue-cli基於webpack,而webpack基於node,對node不瞭解,談什麼瞭解webpack。所以就自己給自己出了一道題,爬取豆瓣數據,目前還處於初級階段。今天就淺 ...
  • 工作需要,項目中需要完成一個日誌工作安排的功能,網上找了好多資料,最後還是修修改改花了一些時間的 碼雲代碼地址:https://gitee.com/yinxiuli/fullcalendar_log_management.git 主要貼一下前端部分的代碼(可見git): <!DOCTYPE html ...
  • 哈哈,上首頁真難,每次都被秒下,心疼自己1秒~ 這裡補充一個簡要圖,方便理解流程: 在處理./input.js入口文件時,在類型判斷被分為普通文件,所以走的文件事件流,最後拼接得到文件的絕對路徑。 但是對應"babel-loader"這個字元串,在如下正則中被判定為模塊類型: 因此,參考第33節的流 ...
  • 用最清晰簡潔的方法整合一個響應式相冊 <! more "效果" 技術選型 由於我選用的主題使用了fancyBox作為圖片彈出展示的框架,查看後表示很不錯,能滿足需要 "http://fancyapps.com/fancybox/3/" 圖片載入可能會太慢,所以還需要一個圖片延遲載入插件 "Lazyl ...
  • 定義: 通過 @keyframes 規則,能夠創建動畫。 創建動畫的原理是,將一套 CSS 樣式逐漸變化為另一套樣式。 在動畫過程中,可以多次改變這套 CSS 樣式。 以百分比來規定改變發生的時間,或者通過關鍵詞 "from" 和 "to",等價於 0% 和 100%。 0% 是動畫的開始時間,10 ...
  • Carbon 是一個可以幫助你創建和分享源代碼美麗圖像的小工具。開始在文本區域輸入或拖入代碼文件以開始使用。你還在等什麼? 讓你的設計實力讓所有閱讀者印象深刻。 ...
  • 前一段時間做了一個小項目,時間比較緊,就一個人月。最終希望能夠通過微信公眾號鏈接啟動應用。 項目的業務細節就不多說了,主要是想分享一下做這個項目技術方面的一些經驗。 技術選型 參考範圍大致三種:AngularJS,Angular,React。 這裡可能會有些困惑,AngularJS和Angular不 ...
  • 轉載自mini_fan博客園: 今天想在Angular項目中使用jQuery的this功能,發現undefined。代碼如下: HTML部分: Js部分: 提示信息:ReferenceError $ is not defined 問題分析: 在angularJs中,this指向$scope!可以$e ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...