Angularjs学习-service

最新推荐文章于 2024-08-25 09:04:46 发布

qq_33571580

最新推荐文章于 2024-08-25 09:04:46 发布

阅读量298

点赞数

分类专栏： angular学习文章标签： angularjs 初级学习

本文链接：https://blog.csdn.net/qq_33571580/article/details/71190120

版权

angular学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Angularjs学习笔记--服务(service)

Angular服务和自定义服务

Angular应用中
View视图~专门用于数据的展示和提取

Controller控制器，主要用于数据的挂载【数据从哪里来？】
|-- 自定义服务：用于从后端接口获取数据，然后将数据挂载到控制器中

Model数据模型：应用中要使用的各种数据，一般从后端获取之后存储在控制器的变量中

Angular的服务，主要从以下两方面来讲

1.自定义服务
Angular中自定义服务的实现方式有三种
* factory工厂模式实现：比较常用，根据项目组规范进行确定是否使用
* service对象方式：比较常用，根据项目组规范进行确定是否使用
* provider代理方式：Angular框架中的使用方式，常规项目开发很少使用

代码演示

[javascript] view plain copy print?
<!DOCTYPE html>    
<html ng-app="myApp">    
<head>    
    <meta charset="UTF-8">    
    <title>Title</title>    
    <script src="js/lib/AngularJS/angular.min.js"></script>    
</head>    
<body>    
<div ng-controller="myCtrl">    
    factory:<div ng-bind="value1"></div>    
    service:<div ng-bind="value2"></div>    
    provider:<div ng-bind="value3"></div>    
</div>    
<script>    
    var app = angular.module("myApp",[]);    
    
    app.controller("myCtrl",["$scope","service1","service2","service3",function($scope,s1,s2,s3){    
      $scope.value1 = s1;//从自定义服务中获取数据    
      $scope.value2 = s2.v;    
      $scope.value3 = s3;    
    }]);    
    
    //第一种实现方式：factory模式    
    /* 第一种实现方式，以其简洁的使用特色而流行于自定义服务行列   
     * 在处理返回数据的时候，可以返回字面量、数组、对象、复杂对象等等各种数据   
     * 极大的满足了我们项目的需要，所以使用较多，需要掌握！   
     * */    
    app.factory("service1",function(){    
        //从后端获取数据：模拟    
        var _v = "factory value";    
        //返回数据，返回的数据可以是字符串，可以是复杂对象    
        return _v;    
    });    
    
    //第二种实现方式：service方法【熟练掌握】    
    /*   
     第二种实现方式，以其规范的返回数据而流行与自定义服务行列   
     service方式，只能返回对象，在某些项目组中，为了规范服务返回的数据~也就是强制指定   
     必须返回对象数据，才能正常解析，避免了出现大量的各种格式的数据：由于返回数据的标准化而流行！   
     */    
    app.service("service2",function(){    
       var _v = "service value";    
        return {v:_v};    
    });    
    
    //第三种实现方式：provider方法    
    /*   
     第三种实现方式，要求处理的过程中必须通过this.$get()函数进行返回数据的处理   
     这种方式在Angular自己的内置服务和框架中使用较多，但是不推荐在项目开发中使用   
     因为操作的复杂性和代码的可读性无形中让开发人员掌握有一定的难度   
     */    
    app.provider("service3",function(){    
       this.$get = function(){    
           return "provider value";    
       }    
    });    
</script>    
</body>    
</html>