详解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    }  })

效果：