Angular服务与自定义服务

最新推荐文章于 2024-05-07 09:56:31 发布

皮皮垚

最新推荐文章于 2024-05-07 09:56:31 发布

阅读量635

点赞数

文章标签： angular web前端框架 angularjs 工厂模式

本文链接：https://blog.csdn.net/sky_lunar_g/article/details/71024218

版权

在Angular应用中：

View视图专门用于数据的展示和提取

Controller控制器，主要用于数据的挂载（数据从哪来？）

自定义服务：用于从后端接口获取数据，然后将数据挂载到控制器中

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

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

1.自定义服务：

Angular中自定义服务的方式有三种：

（1）factory工厂模式实现：比较常用，根据项目组规范进行确定是否使用；

（2）service对象方式：比较常用，根据项目组规范进行确定是否使用；

（3）provider代理方式：Angular框架中的使用方式，常规项目开发很少使用

2.内置服务【$http服务，下次分享】

第一种实现方式——factory模式

1.它以其简洁的使用特色而流行于自定义服务行列；

2.在处理返回数据的时候，可以返回字面量、数组、对象、复杂对象等等各种数据；

3.极大的满足了我们项目的需要，所以使用较多，需要掌握。

<html ng-app="myApp">
<head>
    <title>Title</title>
    <script src="angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
    factory:<div ng-bind="value1"></div>
</div>
<script>
    var app = angular.module("myApp", []);

    app.controller("myCtrl", ["$scope","service1", function($scope, s1) {
            $scope.value1 = s1;
          // 从自定义服务中获取数据
    }]);
    app.factory("service1", function() {
        // 从后端获取数据:模拟
        var _v = "factory value";
        // 返回数据，返回的数据可以是字符串，可以是复杂对象
        return _v;
    });
</script>
</body>
</html>

第二种实现方式——service方式【熟练掌握】

1、以其规范的返回数据而流行与自定义服务行列

2、service方式，只能返回对象，在某些项目组中，为了规范服务返回的数据，也就是强制指定，

必须返回对象数据，才能正常解析，避免了出现大量的各种格式的数据；由于返回数据的标准化而流行！

<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
   service:<div ng-bind="value2"></div>
</div>
<script>
    var app = angular.module("myApp", []);

    app.controller("myCtrl", ["$scope","service2", function($scope, s2) {
            $scope.value2 = s2.v;    // s2 {v:_v},s2.v:_v
    }]);
    app.service("service2", function() {
        // 从后端获取数据:模拟
        var _v = "service value";
        // 返回JSON对象
        return{v：_v};
    });
</script>
</body>
</html>

第三种实现方式——provider方式【了解】

1、要求处理的过程中必须通过this.$get()函数进行返回数据的处理
2、这种方式在Angular自己的内置服务和框架中使用较多，但是不推荐在项目开发中使用
因为操作的复杂性和代码的可读性无形中让开发人员掌握有一定的难度

<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
    provider:<div ng-bind="value3"></div>
</div>
<script>
    var app = angular.module("myApp", []);

    app.controller("myCtrl", ["$scope","service3", function($scope, s3) {
            $scope.value3 = s3;
    }]);
    app.provider("service3", function() {
        this.$get=function(){
         return "provider value";
         }
    });
</script>
</body>
</html>

皮皮垚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular服务与自定义服务

在Angular应用中：View视图专门用于数据的展示和提取Controller控制器，主要用于数据的挂载（数据从哪来？）自定义服务：用于从后端接口获取数据，然后将数据挂载到控制器中Model数据模型：应用中要使用的各种数据，一般从后端获取之后存储在控制器的变量中Angular的服务，主要从以下两方面来讲：1.自定义服务：Angular中自定义服务的方式有
复制链接

扫一扫