angular服务和自定义服务

来源：互联网发布：淘宝男模特排名与图片编辑：程序博客网时间：2024/05/16 05:54

angular服务:最近在工作项目中用到了AngulaJs的相关知识，在起初学习之际就知道了其在项目中比较常用，在Angular 中也比较重要，在学习工作中也跳了不少坑，在这里把我的跳坑经验分享给大家，希望大家在学习工作中避免跳坑，快乐成长。

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

1.自定义服务

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

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

*factory工厂模式实现：比较常用，根据项目规范确定是否使用

*service对象方式：比较常用，根据项目规范确定是否使用

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

2.内置服务器【$http服务，其他服务在以后详细讲解】

案例讲解：

<html ng-app="myApp">

<div ng-controller="myCtrl"> factory:<div ng-bind="value1"></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;// s2 {v:_v}, s2.v:_v            $scope.value3 = s3;    }]);</script>

第一种实现方式：factory模式

* 第一种实现方式，以其简洁的使用特色而流行于自定义服务行列
* 在处理返回数据的时候，可以返回字面量、数组、对象、复杂对象等等各种数据
* 极大的满足了我们做项目时的需要，所以使用较多，需要牢牢掌握！

<script> app.factory("service1", function() {        // 从后端获取数据:模拟        var _v = "factory value";        // 返回数据，返回的数据可以是字符串，可以是复杂对象        return _v;    });</script>

第二种定义方式：service方式

*以其规范的返回数据而流行与自定义服务行列
* service方式，只能返回对象，在某些项目组中，为了规范服务返回的数据~也就是强制指定
*必须返回对象数据，才能正常解析，避免了出现大量的各种格式的数据：由于返回数据的标准化而流行！

<script> app.service("service2", function() {        // 从后端获取数据：模拟        var _v = "service value";        // 返回JSON对象        return {v:_v};    });</script>

第三种定义方式：provider方式

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

 <script>app.provider("service3", function() {        this.$get =function() {            return "provider value";        }    });</script>

MVC简单讲解：

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

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

Controller控制器，主要用于数据的挂载。

0 0