詳解Angular中的自定義服務Service、Provider以及Factory

2019-11-19 16:45:54

字體：大中小

來源：轉載

供稿：網友

背景來源于前段時間的一場面試，面試官看著我Angular控制器中添加各種功能重復的方法，臉都發綠了，不過還是耐心地跟我指出提高Angular代碼復用性需要Service、Provider和Factory三種復用性很高的方法，遂習之，以下是我的學習成果：

先說說Factory:

通過注冊.factory('my注冊名',方法())，返回一個對象，你就能在控制器中引入這個方法并訪問這個對象：
例子：

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

JS代碼：

/*工廠模式，注入參數中調用的是這個函數里的返回值*/  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使用構造函數的方法去用它，在控制器中是以new的方式引入，所以可以調用service中定義的屬性

HTML：

<!-- service模式 -->  <div ng-controller="theServiceCtrl">    <h3>Service模式</h3>    <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出來的，所以可以直接調用里面的屬性*/  app.service("myService",function(){    this.num = Math.floor(Math.random()*10);//0到10的隨機數    this.prop = function(arg){      return arg;    };  })

效果：

Provider：

如果你想在創建服務之前先對服務進行配置，那么你需要provider，因為provider可以通過定義config，并在$get中訪問config
HTML：

<!-- provider模式 -->  <div ng-controller="theProviderCtrl">    <h3>Provider模式</h3>    <p>姓名:{{info.name}}</p>    <p>部隊:{{info.squad}}</p>    <p>職務:{{info.role}}</p>  </div>

JS：

/*使用$get方法關聯對應的config*/  app.provider("myProvider",function(){    this.$get = function(){      return {        name : "朱子明",        squad : "八路軍386旅獨立團",        role : this.roleSet      }    }  })  /*名字必須符合規范：xxxxxxProvider*/  app.config(function(myProviderProvider){    myProviderProvider.roleSet = "保衛干事"  })app.controller("theProviderCtrl",function($scope,myProvider){    $scope.info = {      name : myProvider.name,      squad : myProvider.squad,      role : myProvider.role    }  })

效果：