【AngularJS中的自定义服务service VS factory VS provider】---它们的区别，你知道么？

时间 2019-12-13

标签 angularjs 自定义服务 service factory provider 它们区别知道栏目 AngularJS 繁體版

原文原文链接

在介绍AngularJS自定义服务以前，咱们先来了解一下AngularJS~前端

学过HTML的人都知道，HTML是一门很好的伪静态文本展现设计的声明式语言，可是，要构建WEB应用的话它就显得乏力了。angularjs

而AngularJS是为了克服HTML在构建应用上的不足而设计的。服务器

AngularJS是一款优秀的前端JS框架，已经被用于Google的多款产品当中。它有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等……app

AngularJS经过新的属性和表达式扩展了HTML；能够构建一个单一页面应用程序；并且学习起来很是简单。框架

有了以上的了解，咱们来看一下AngularJS中的自定义服务。ide

angularjs中可经过三种方式自定义服务，模块化

分别为$service，$factory，$provider。函数

下面我就给你们分别介绍一下三种AngularJS自定义服务的区别：学习

1、服务servicethis

第一次被注入时实例化，只实例化一次，整个应用的生命周期中是个单例模式，能够用来在controller之间传递数据；

使用new关键字实例化，因此直接使用this定义service，若是你不知道缘由，就看看js中的this。
例如：

1 .service('myService', ['', function() {
2 this.getName = function() {
3 return 'CooMark';
4 }
5 }])

内置服务：
>>> 使用内置服务,必须在Controller中经过函数的参数注入进来！！！！！

$location：返回当前页面的 URL地址。
$http:向服务器发送请求，应用响应服务器传送过来的数据,相似于Ajax
$timeout：至关于setTimeout();
$interval：至关于setInterval();

（参考代码）body部分：

1 <body ng-app="app" ng-controller="ctrl">
2     <p>[功能]<br />
3        {{gongneng}}
4     </p>
5     <p>255转为16进制为:{{num}}</p>
6 </body>

（参考代码）JS部分：

先导入JS文件angular.js！！！

1 <script src="libs/angular.js"></script>

 2     <script>
 3         angular.module("app",[])
 4         .controller("ctrl",function($scope,$location,$timeout,$interval,$hexafy){
 5             
 6 //          $scope.local = $location.$$absUrl;
 7 //          $scope.local = $location.absUrl();
 8 
 9             $scope.local = $location.$$host;
10             
11             $timeout(function () {
12                 $scope.myHeader = "How are you today?";
13             }, 2000);
14             $scope.num = 0;
15             
16             $interval(function(){
17                 $scope.num ++;
18             },1000);
19             
20             $scope.gongneng = $hexafy.$$gongneng;
21             $scope.hexafy = $hexafy;
22         })
23         
24         /*自定义服务*/
25         .service('$hexafy', function() {
26             this.$$gongneng = "将转入的数字，转为16进制";
27             this.myFunc = function (x) {
28                 return x.toString(16);
29             }
30         })
31         
32         /*自定义过滤器*/
33         .filter("filt",function(){
34             return function(x){
35                 return x.toString(16);
36             }
37         })
38         /*在过滤器中，调用自定义服务*/
39         .filter("filt1",function($hexafy){
40             return function(x){
41                 return $hexafy.myFunc(x);
42             }
43         })
44         
45         
46     </script>

2、服务factory

factory是一个函数用于返回值，一般咱们使用factory函数来计算或返回值。

factory使用上，与service差距不大。

（参考代码） body部分参考服务Service，JS代码以下：

先导入JS文件angular.js！！！

 1 <script src="libs/angular.js"></script>
 2     <script>
 3         angular.module("app",[])
 4         .config()
 5         .controller("ctrl",function($scope,hexafy){
 6             $scope.gongneng = hexafy.gongneng;
 7             $scope.num = hexafy.myFunc(255);
 8         })
 9         .factory('hexafy',function(){
10             var obj = {
11                 gongneng : "将转入的数字，转为16进制",
12                 myFunc:function(x){
13                     return x.toString(16);
14                 }
15             };
16             return obj;
17         })
18     
19 </script>

3、服务provider

一、在AngularJS中，Service，factory都是基于provider实现的。
二、在provider中，经过$get()方法提供了factory的写法，用于返回 value/service/factory。；
三、provider是三种自定义服务中，惟一能够写进config配置阶段的一种。

若是服务，必需要在配置阶段执行，那么必须使用provider。不然，通常使用Service或factory。

4、扩展：angularjs的依赖注入和自定义服务有什么区别

AngularJS其实是在调用前面出现的代码（就是$provide.provider的版本）。

从字面上来讲，angularjs的依赖注入和自定义服务基本上没有差异。

value方法也同样，若是咱们须要从$get函数（也就是咱们的factory函数）返回的值永远相同的话，

咱们可使用value方法来编写。

好了~~~今天的博客内容就先分享到这里，欢迎留言~~~

你们一块儿加油哦！一块儿学习，一块儿进步！