来自 软件资讯 2019-12-18 16:00 的文章
当前位置: 威尼斯国际官方网站 > 软件资讯 > 正文

AngularJS中的自定义服务service

在介绍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:重回当前页面的URAV4L地址。
$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方法来编排。

 

好了~明天的博客内容就先分享到这里,招待留言~

世家豆蔻梢头道加油啊!一齐学学,一同发展!

 

本文由威尼斯国际官方网站发布于软件资讯,转载请注明出处:AngularJS中的自定义服务service

关键词: