您的位置：首页 > Web前端 > AngularJS

AngularJS--自定义服务的三种方式用法总结

2017-04-28 13:29 471 查看

AngularJS 中可通过三种（
$provider,$factory,$service
）方式自定义服务，以下是不同的实现形式：

第一种factory工厂模式实现：

以其简洁的使用特色而流行于自定义服务行列

* 在处理返回数据的时候，可以返回字面量、数组、对象、复杂对象等等各种数据

* 极大的满足了我们项目的需要，所以使用较多，需要掌握！

html页面：

<div ng-controller="myCtrl">
<span ng-bind="value1"></span>
</div>

输出结果：

factory value

JS代码：

app.controller("myCtrl",["$scope","service1",function($scope,s1){
$scope.value1=s1;
}])
app.factroy("service1",function(){
//模拟从后端获取数据
var _v="factory value";
//返回数据
return _v;
})

第二种service对象方式实现

以其规范的返回数据而流行与自定义服务行列

service方式，只能返回对象，在某些项目组中，为了规范服务返回的数据~也就是强制指定

必须返回对象数据，才能正常解析，避免了出现大量的各种格式的数据：由于返回数据的标准化而流行！

html页面：

<div ng-controller="myCtrl">
<span ng-bind="value2"></span>
</div>

输出结果：

service value

JS代码：

app.controller("myCtrl",["$scope","service2",function($scope,s2){
$scope.value2=s2.v;
}])
app.service("service2",function(){
//模拟从后端获取数据
var _v="service value";
//返回json对象
return {v:_v};
})

第三种provider代理方式实现

要求处理的过程中必须通过this.$get()函数进行返回数据的处理

这种方式在Angular自己的内置服务和框架中使用较多，但是不推荐在项目开发中使用

因为操作的复杂性和代码的可读性无形中让开发人员掌握有一定的难度

html页面：

<div ng-controller="myCtrl">
<span ng-bind="value3"></span>
</div>

输出结果：

provider value

JS代码：

app.provider("service3",function(){
//通过this.$get()函数进行返回数据的处理
this.$get=function(){
return "provider value"
}
})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html angularjs 自定义服务

相关文章推荐

新的分享

章节导航