AngularJS【AngularJS中之自定义服务service VS factory VS provider】—它们的别,你明白啊?

于介绍AngularJS自定义服务之前,我们先来询问一下AngularJS~

 

学过HTML的口都亮,HTML是同派大好的伪静态文本展示设计之声明式语言,但是,要构建WEB应用之语它就是显乏力了。

万一AngularJS是为克服HTML在构建利用达到之贫乏使计划之。

AngularJS大凡平缓缓好的前端JS框架,已经让用来Google的多款产品中间。它具有众多特性,最为基本之是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等……

AngularJS通过新的性质与表达式扩展了HTML;可以构建一个单一页面应用程序;而且学习起来非常简单。

 

发生矣上述的垂询,我们来拘禁一下AngularJS遭之自定义服务。

angularjs中只是经过三种植艺术于定义服务,

分别为$service,$factory,$provider

 

脚我不怕于大家各自介绍一下老三种植AngularJS自定义服务的别:

 

一、服务service

 

先是差被注入时实例化,只实例化一次,整个应用之生命周期中凡独单例模式,可以为此来以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>

 

二、服务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>

 

三、服务provider

1、在AngularJS中,Service,factory都是基于provider实现之。
2、在provider中,通过$get()方法提供了factory的写法,用于返回
value/service/factory。;
3、provider是三种植起定义服务中,唯一可写进config配置等的一样栽。

而服务,必须要以安排等实施,那么得动provider。否则,一般下Service或factory。

 

季、扩展:angularjs的依赖注入和从定义服务产生啊区别

   
AngularJS实际上是于调用前面出现的代码(就是$provide.provider的本)。

   
从字面上来说,angularjs的依注入和由定义服务多没差异。

   
value方法也如出一辙,如果我们需要从$get函数(也便是咱的factory函数)返回的价永远相同的话,

咱们好采用value方法来编排。

 

好了~今天之博客内容就优先分享至这里,欢迎留言~

世家并加油啊!一起学学,一起前进!

 

相关文章