背景来源于前段时间的一场面试,面试官看着我Angular控制器中添加各种功能重复的方法,脸都发绿了,不过还是耐心地跟我指出提高Angular代码复用性需要Service、Provider和Factory三种复用性很高的方法,遂习之,以下是我的学习成果:
先说说Factory:
通过注册.factory('my注册名',方法()),返回一个对象,你就能在控制器中引入这个方法并访问这个对象: 例子:
JS代码:
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:
prop:{{prop}}
num:{{num}}
JS:
效果:
Provider:
如果你想在创建服务之前先对服务进行配置,那么你需要provider,因为provider可以通过定义config,并在$get中访问config HTML:
姓名:{{info.name}}
部队:{{info.squad}}
职务:{{info.role}}
JS:
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
}
})
效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。