• 【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方法来编写。

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

    大家一起加油哦!一起学习,一起进步!

    ..。..。..。..。..。..。..。..。..。END..。..。..。..。..。..。..。..。..。

    ..。..。..。..。..。..。希望可以帮到你哟..。..。..。..。..。..。


    作者:夕照希望
    出处:http://www.cnblogs.com/hope666/  
  • 相关阅读:
    东北师范大学信息化建设-北大公益论坛演讲稿
    HTML5定稿一周年,你必须要重新认识HTML5了
    从Java的角度理解前端框架,nodejs,reactjs,angularjs,requirejs,seajs
    mui开发webapp(2)
    mui开发webapp(1)
    html5+ plus和phoneGap、cordova的比较
    mui开发
    Web前端技能
    javascript权威指南第六版学习
    鼠标移入的box-shadow参考
  • 原文地址:https://www.cnblogs.com/hope666/p/6821922.html
Copyright © 2020-2023  润新知