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

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

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

先说说Factory:

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

例子：

{{i}}

js代码：

/*工厂模式，注入参数中调用的是这个函数里的返回值*/

app.factory("myFactory",function(){

var args = arguments;

var obj = {}

obj.exec = function(){

var arr = [];

for(let i = 0; i

arr.push(arguments[i]);

}

return arr;

}

return obj;

})

app.controller("theFactoryCtrl",function ($scope,myFactory) {

$scope.names = myFactory.exec("张三的歌","赵四的舞","老王贼六");

})

效果：

Service:

在service使用构造函数的方法去用它，在控制器中是以new的方式引入，所以可以调用service中定义的属性

HTML：

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：

app.controller("theServiceCtrl",function($scope,myService){

$scope.prop = myService.prop("呵呵");

$scope.num = myService.num;

})

/*Service是new出来的，所以可以直接调用里面的属性*/

app.service("myService",function()http://{

this.num = Math.floor(Math.random()*10);//0到10的随机数

this.prop = function(arg){

return arg;

};

})

效果：

Provider：

如果你想在创建服务之前先对服务进行配置，那么你需要provider，因为provider可以通过定义config，并在$get中访问config

HTML：

姓名:{{info.name}}

部队:{{info.squad}}

职务:{{info.role}}

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 : myProvhttp://ider.role

}

})

效果：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。