详解Angular中的自定义服务Service、Provider以及Factory

前端之家收集整理的这篇文章主要介绍了详解Angular中的自定义服务Service、Provider以及Factory前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

背景来源于前段时间的一场面试,面试官看着我Angular控制器中添加各种功能重复的方法,脸都发绿了,不过还是耐心地跟我指出提高Angular代码复用性需要Service、Provider和Factory三种复用性很高的方法,遂习之,以下是我的学习成果:

先说说Factory:

通过注册.factory('my注册名',方法()),返回一个对象,你就能在控制器中引入这个方法并访问这个对象: 例子:

Factory模式

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模式

prop:{{prop}}

num:{{num}}

JS:

调用里面的属性*/ 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模式

姓名:{{info.name}}

部队:{{info.squad}}

职务:{{info.role}}

JS:

方法关联对应的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",myProvider){
$scope.info = {
name : myProvider.name,squad : myProvider.squad,role : myProvider.role

}

})

效果

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

猜你在找的JavaScript相关文章