AngularJS自定义服务与内置服务

Angular的服务，主要从以下两方面来讲
1.自定义服务，用于从后端接口获取数据，然后将数据挂载到控制器中
Angular中自定义服务的实现方式有三种
factory工厂模式实现：比较常用，根据项目组规范进行确定是否使用
service对象方式：比较常用，根据项目组规范进行确定是否使用
provider代理方式：Angular框架中的使用方式，常规项目开发很少使用
2.内置服务，http服务，location服务，timeout()服务和interval()服务
1)自定义服务factory方式：

 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;
    }]);

    /* 第一种实现方式，以其简洁的使用特色而流行于自定义服务行列
     * 在处理返回数据的时候，可以返回字面量、数组、对象、复杂对象等等各种数据
     * 极大的满足了我们项目的需要，所以使用较多，需要掌握！
     * */
    app.factory("service1", function() {
        // 从后端获取数据:模拟
        var _v = "factory value";
        // 返回数据，返回的数据可以是字符串，可以是复杂对象
        return _v;
    });

2)自定义服务service方式：

    /*
    第二种实现方式，以其规范的返回数据而流行与自定义服务行列
    service方式，只能返回对象，在某些项目组中，为了规范服务返回的数据~也就是强制指定
    必须返回对象数据，才能正常解析，避免了出现大量的各种格式的数据：由于返回数据的标准化而流行！
     */
    app.service("service2", function() {
        // 从后端获取数据：模拟
        var _v = "service value";
        // 返回JSON对象
        return {v:_v};
    });

3)自定义服务provider方式：

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

        this.$get =function() {
            return "provider value";
        }
    });

1)内置服务$location服务

/*$location服务用于返回当前页面的URL地址*/
var app = angular.module('myApp', []); 
app.controller('customersCtrl', function($scope, $location) { 
 $scope.myUrl = $location.absUrl(); 
}); 

2）内置服务$http服务：

/*$http 是 AngularJS 中最常用的服务，它经常用于服务器的数据传输。下面的例子中服务向服务器发送请求，应用响应服务器传送过来的数据。*/
var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope, $http) { 
 $http.get("welcome.htm").then(function (response) { 
  $scope.myWelcome = response.data; 
 }); 
});

3）内置服务$timeout()服务:

/*AngularJS $timeout 服务对应了 JS window.setTimeout 函数。*/
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
});

4)内置服务$interval 服务

/*AngularJS $interval 服务对应了 JS window.setInterval 函数。*/
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});