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