手机抽奖小程序_详解Angular中的自界说效劳Servi

2021-01-12 11:56

详解Angular中的自定义服务Service、Provider以及Factory       本篇文章主要介绍了详解Angular中的自定义服务Service、Provider以及Factory,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

先说说Factory:

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

 !-- factory模式 -- 
 div ng-controller="theFactoryCtrl" 
 h3 Factory模式 /h3 
 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){
 $ = {
 name : myProvider.name,
 squad : myProvider.squad,
 role : myProvider.role

效果:

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




扫描二维码分享到微信

在线咨询
联系电话

020-66889888