AngularJS學習之旅—AngularJS 服務(八)

時間 2020-05-16

原文原文鏈接

一、AngularJS 服務(Service)
　　AngularJS 中你能夠建立本身的服務，或使用內建服務。
二、什麼是服務？
　　在 AngularJS 中，服務是一個函數或對象，可在你的 AngularJS 應用中使用。
　　AngularJS 內建了30 多個服務。
　　有個 $location 服務，它能夠返回當前頁面的 URL 地址。
　　注意 $location 服務是做爲一個參數傳遞到 controller 中。若是要使用它，須要在 controller 中定義。html

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

三、爲何使用服務?
　　在不少服務中，好比 $location 服務，它能夠使用 DOM 中存在的對象，相似 window.location 對象，但 window.location 對象在 AngularJS 應用中有必定的侷限性。
　　AngularJS 會一直監控應用，處理事件變化， AngularJS 使用 $location 服務比使用 window.location 對象更好。jquery

　　$location vs window.location

	window.location	$location.service
目的	容許對當前瀏覽器位置進行讀寫操做	容許對當前瀏覽器位置進行讀寫操做
API	暴露一個能被讀寫的對象	暴露jquery風格的讀寫器
是否在AngularJS應用生命週期中和應用整合	否	可獲取到應用生命週期內的每個階段，而且和$watch整合
是否和HTML5 API的無縫整合	否	是（對低級瀏覽器優雅降級）
和應用的上下文是否相關	否，window.location.path返回"/docroot/actual/path"	是，$location.path()返回"/actual/path"

　　$http 服務

　　　　$http 是 AngularJS 應用中最經常使用的服務。服務向服務器發送請求，應用響應服務器傳送過來的數據。json

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

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

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

　　建立自定義服務

app.service('hexafy', function() { this.myFunc = function (x) { return x.toString(16); } }); app.controller('myCtrl', function($scope, hexafy) { $scope.hex = hexafy.myFunc(255); });

實例服務器

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="js/angular.min.js"></script>
</head>

<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <!-- $location服務 -->
        <p> 當前頁面的url:</p>
        <h3>{{myUrl}}</h3>
        <p>該實例使用了內建的 $location 服務獲取當前頁面的 URL。</p>
        <!-- $http 服務 -->
        <p>歡迎信息:</p>
        <h3>{{myWelcome}}</h3>
        <p> $http 服務向服務器請求信息，返回的值放入變量 "myWelcome" 中。</p>
        <!-- $timeout 服務 -->
        <p>兩秒後顯示信息:</p>
        <h1>{{myHeader}}</h1>
        <p>$timeout 訪問在規定的毫秒數後執行指定函數。</p>
        <!-- $interval 服務 -->
        <p>如今時間是:</p>
        <h1>{{theTime}}</h1>
        <p>$interval 訪問在指定的週期(以毫秒計)來調用函數或計算表達式。</p>
        <!-- 建立自定義服務 -->
        <p>255 的16進制是:</p>
        <h1>{{hex}}</h1>
        <p>自定義服務，用於轉換16進制數：</p>
        <!-- 在過濾器中使用自定義服務 -->
        <p>在過濾器中使用服務:</p>
        <h1>{{255 | myFormat}}</h1>
        <!-- 在對象數組中獲取值時你能夠使用過濾器 -->
        <p>在獲取數組 [255, 251, 200] 值時使用過濾器:</p>
        <ul>
        <li ng-repeat="x in counts">{{x | myFormat}}</li>
        </ul>
        <p>過濾器使用服務將10進制轉換爲16進制。</p>
    </div>
</body>

</html>
<script>
    var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope,$location,$http,$timeout,$interval,hexafy) { //$location服務
 $scope.myUrl = $location.absUrl(); //$http服務
 $http.get("welcome.json").then(function (response) { $scope.myWelcome = response.data[0].name; }); //$timeout服務
 $scope.myHeader = "Hello World!"; $timeout(function () { $scope.myHeader = "How are you today?"; }, 2000); //$interval 服務
 $interval(function () { $scope.theTime = new Date().toLocaleTimeString(); }, 1000); //自定義服務
 $scope.hex = hexafy.myFunc(255); //在對象數組中獲取值時你能夠使用過濾器
 $scope.counts = [255, 251, 200]; }); //自定義服務
 app.service('hexafy', function() { this.myFunc = function (x) { return x.toString(16); } }); //過濾器中，使用自定義服務
 app.filter('myFormat',['hexafy', function(hexafy) { return function(x) { return hexafy.myFunc(x); }; }]); </script>