AngularJs Service

什么是服务？

在AngularJS中，服务是一个函数或对象，可以在AngularJs应用中使用。

AngularJs中内建了30多个服务，当然，也可以自定义服务。

为什么是服务？ 

在很多服务中，比如$location服务，它可以使用DOM中存在的对象，类似window.location对象，但window.location对象在AngularJS应用中有一定的局限性。

　　因为这些服务可以获取到AngularJS应用声明周期的每一个阶段，并且和$watch整合，让Angular可以监控应用，处理事件变化。普通的DOM对象则不能在AngularJS应用声明周期中和应用整合。

$watch:持续监听数据上的变化,更新界面，如： 

　　<div ng-app="myApp" ng-controller="myCtrl">
        <label for="">姓：<input type="text" ng-model="firstName"></label><br />
        <label for="">名：<input type="text" ng-model="lastName"></label><br />
        <h1>全名：{{fullName}}</h1>
    </div>

　　var app = angular.module("myApp",[]);
　　app.controller("myCtrl",function($scope){
    　　$scope.firstName = "hehe";
    　　$scope.lastName = "老街";
    　　//监听firstName的变化，更新fullName
    　　$scope.$watch("firstName",function(){
        　　$scope.fullName = $scope.firstName +","+$scope.lastName;
    　　})
    　　//监听lastName的变化，更新fullName
    　　$scope.$watch("lastName",function(){
        　　$scope.fullName = $scope.firstName +","+$scope.lastName;
    　　})
　　})

1.$location服务：返回当前页面的URL地址

    <div ng-app="myApp" ng-controller="myCtrl">
        {{myUrl}}
    </div>

　　var app = angular.module("myApp",[]);
　　app.controller("myCtrl",function($scope,$location){
    　　$scope.myUrl = $location.absUrl();
　　})

2.$http服务

$http是AngularJS应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。

使用$http服务向服务器请求数据：

　　var app = angular.module("myApp",[]);
　　app.controller("myCtrl",function($scope,$location,$http){
    　　$scope.myUrl = $location.absUrl();
    　　$http.get("welcome.html").then(function(response){
        　　$scope.myWelcome = response.data;
    　　})
　　})

3.$timeout服务

AngularJS $timeout服务对应了JS window.setTimeout函数

    <div ng-app="myApp" ng-controller="myCtrl">
        <p>{{ myUrl }}</p>
        <p>{{ myHeader }}</p>
    </div>

    var app = angular.module("myApp",[]);
    app.controller("myCtrl",function($scope,$location,$http,$timeout){
        $scope.myUrl = $location.absUrl();
        // $http.get("welcome.html").then(function(response){
        //     $scope.myWelcome = response.data;
        // })
        $scope.myHeader = "Hello World!";
        $timeout(function(){
            $scope.myHeader = "How are you today?";
        },2000)
    })

4.$interval服务

AngularJS中 $interval 服务对应JS中window.setInterval函数

    <div ng-app="myApp" ng-controller="myCtrl">
        <p>{{ theTime }}</p>
    </div>

    var app = angular.module("myApp",[]);
    app.controller("myCtrl",function($scope,$interval){
        $scope.theTime = new Date().toLocaleTimeString();
        $interval(function(){
            $scope.theTime = new Date().toLocaleTimeString();
        },1000)
    })

创建自定义服务

创建名为hehe的访问：

    <div ng-app="myApp" ng-controller="myCtrl">
        <p>{{he}}</p>
    </div>

　　 var app = angular.module("myApp",[]);
    app.controller("myCtrl",function($scope,hehe){
        $scope.he = hehe.myFunc(255);
    })
    app.service("hehe",function(){
        this.myFunc = function (x) {
            return x.toString(16);
        }
    })

过滤器中，使用自定义服务 

当你创建了自定义服务，并连接到你的应用上后，你可以在控制器，指令，过滤器或其他服务中使用它。

在过滤器myForm中使用服务hehe

    var app = angular.module("myApp",[]);
    app.controller("myCtrl",function($scope,hehe){
        $scope.he = hehe.myFunc(255);
    })
    // 自定义服务hehe
    app.service("hehe",function(){
        this.myFunc = function (x) {
            return x.toString(16);
        }
    })
    // 在过滤器myFormat中使用服务hehe
    app.filter("myFormat",["hehe",function(hehe) {
        return function (x) {
            return hehe.myFunc(x);
        }
    }])

用$apply,实现每一秒显示信息功能(实现$interval功能)

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.theTime = new Date().toLocaleTimeString();
    $scope.setTime = function() {
        // $apply 方法可以修改数据
        $scope.$apply(function() {
            $scope.theTime = new Date().toLocaleTimeString();
        });
    };
    setInterval($scope.setTime, 1000);
});