這篇文章主要為大家展示了“Angular中自定義服務(wù)Service、Provider以及Factory有什么用”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Angular中自定義服務(wù)Service、Provider以及Factory有什么用”這篇文章吧。

10多年的衡陽(yáng)縣網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)營(yíng)銷(xiāo)推廣的優(yōu)勢(shì)是能夠根據(jù)用戶(hù)設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整衡陽(yáng)縣建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“衡陽(yáng)縣網(wǎng)站設(shè)計(jì)”,“衡陽(yáng)縣網(wǎng)站推廣”以來(lái)，每個(gè)客戶(hù)項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

先說(shuō)說(shuō)Factory:

通過(guò)注冊(cè).factory('my注冊(cè)名',方法())，返回一個(gè)對(duì)象，你就能在控制器中引入這個(gè)方法并訪(fǎng)問(wèn)這個(gè)對(duì)象：
例子：

<!-- factory模式 -->
  <div ng-controller="theFactoryCtrl">
    <h4>Factory模式</h4>
    <ul>
      <li ng-repeat="i in names">
        {{i}}
      </li>
    </ul>

  </div>

JS代碼：

/*工廠(chǎng)模式，注入?yún)?shù)中調(diào)用的是這個(gè)函數(shù)里的返回值*/
  app.factory("myFactory",function(){

    var args = arguments;
    var obj = {}

    obj.exec = function(){
      var arr = [];
      for(let i = 0; i<arguments.length; i++){
        arr.push(arguments[i]);
      }
      return arr;
    }
    return obj;
  })
app.controller("theFactoryCtrl",function ($scope,myFactory) {

    $scope.names = myFactory.exec("張三的歌","趙四的舞","老王賊六");

  })

效果：

Service:

在service使用構(gòu)造函數(shù)的方法去用它，在控制器中是以new的方式引入，所以可以調(diào)用service中定義的屬性

HTML：

<!-- service模式 -->
  <div ng-controller="theServiceCtrl">
    <h4>Service模式</h4>
    <p>prop:{{prop}}</p>
    <p>num:{{num}}</p>
  </div>

JS：

app.controller("theServiceCtrl",function($scope,myService){
    $scope.prop = myService.prop("呵呵");
    $scope.num = myService.num;
  })
/*Service是new出來(lái)的，所以可以直接調(diào)用里面的屬性*/
  app.service("myService",function(){
    this.num = Math.floor(Math.random()*10);//0到10的隨機(jī)數(shù)
    this.prop = function(arg){
      return arg;
    };
  })

效果：

Provider：

如果你想在創(chuàng)建服務(wù)之前先對(duì)服務(wù)進(jìn)行配置，那么你需要provider，因?yàn)閜rovider可以通過(guò)定義config，并在$get中訪(fǎng)問(wèn)config
HTML：

<!-- provider模式 -->
  <div ng-controller="theProviderCtrl">
    <h4>Provider模式</h4>
    <p>姓名:{{info.name}}</p>
    <p>部隊(duì):{{info.squad}}</p>
    <p>職務(wù):{{info.role}}</p>
  </div>

JS：

/*使用$get方法關(guān)聯(lián)對(duì)應(yīng)的config*/
  app.provider("myProvider",function(){

    this.$get = function(){

      return {
        name : "朱子明",
        squad : "八路軍386旅獨(dú)立團(tuán)",
        role : this.roleSet

      }
    }

  })
  /*名字必須符合規(guī)范：xxxxxxProvider*/
  app.config(function(myProviderProvider){
    myProviderProvider.roleSet = "保衛(wèi)干事"
  })
app.controller("theProviderCtrl",function($scope,myProvider){
    $scope.info = {
      name : myProvider.name,
      squad : myProvider.squad,
      role : myProvider.role

    }
  })

效果：

以上是“Angular中自定義服務(wù)Service、Provider以及Factory有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前標(biāo)題：Angular中自定義服務(wù)Service、Provider以及Factory有什么用
轉(zhuǎn)載注明：http://www.chinadenli.net/article34/gpoppe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、企業(yè)建站、域名注冊(cè)、網(wǎng)站改版、電子商務(wù)、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)