背景来源于前段时间的一场面试，面试官看着我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; }) 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：

app.provider("myProvider",function(){ this.$get = function(){ return { name : "朱子明", squad : "八路军386旅独立团", role : this.roleSet } } }) app.config(function(myProviderProvider){ myProviderProvider.roleSet = "保卫干事" })app.controller("theProviderCtrl",function($scope,myProvider){ $scope.info = { name : myProvider.name, squad : myProvider.squad, role : myProvider.role } })

效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。