{% raw %} # AngularJS 服務（內置和自定義） > 原文： [https://howtodoinjava.com/angularjs/angularjs-services-built-in-and-custom/](https://howtodoinjava.com/angularjs/angularjs-services-built-in-and-custom/) 正如我們在 [Angular 介紹](//howtodoinjava.com/angularjs/angularjs-tutorial-helloworld-example/)中了解到的，服務是**無狀態對象和單例對象**，它們為 Web 應用提供功能。 例如，`$http`是用于對 Web 服務器進行 HTTP 調用的核心服務。 簡單來說，您可以將 Angular 服務假定為可重用代碼塊，它執行一個或多個相關任務（例如 Java 中帶有靜態方法的工具類）。 在 AngularJS 中，有幾個內置服務 – 您也可以創建自己的自定義服務。 ```java Table of Contents Built-in Services Creating Custom Services How to use Services ``` ## 內置 Angular 服務 如前所述，Angular 提供了幾種內置服務，這些服務可以即時使用。 在運行時，這些服務會自動向依賴項注入器注冊，因此您可以通過使用依賴項注入輕松地將它們合并到您的 angular 應用中。 例如，要在控制器中使用`$http`服務，請按以下步驟注入服務： ```java module.controller('DemoController', function( $http ){ //... }); ``` 讓我們列出有 Angular 的內置服務。 | 服務名稱 | 描述 | | --- | --- | | `$anchorScroll` | 提供滾動到`$location.hash()`中指定的頁面錨點的功能 | | `$animate` | 該服務公開了一系列 DOM 工具方法，這些方法提供對動畫掛鉤的支持。 | | `$animateCss` | 默認情況下，僅當包含`ngAnimate`時，此服務才會執行動畫。 | | `$cacheFactory` | 構造緩存對象，放置和檢索鍵值對并為其提供對其他服務的訪問權限的工廠。 | | `$templateCache` | 首次使用模板時，會將其加載到模板緩存中以便快速檢索。 | | `$compile` | 將 HTML 字符串或 DOM 編譯到模板中，并生成模板函數，然后可以使用該函數將范圍和模板鏈接在一起。 | | `$controller` | 這負責實例化 Angular 控制器組件。 | | `$document` | 指定對`window.document`元素的 [jQuery 包的](//howtodoinjava.com/scripting/jquery/javascript-dom-objects-vs-jquery-objects/)引用。 | | `$exceptionHandler` | Angular 表達式中任何未捕獲的異常都委托給此服務。 默認實現只是委派給`$log.error`，它將其記錄到瀏覽器控制臺中。 | | `$filter` | 過濾器用于格式化顯示給用戶的數據。 | | `$httpParamSerializer` | 默認的`$http`參數序列化程序，將對象轉換為字符串。 | | `$httpParamSerializerJQLike` | 替代`$http`參數序列化器，它遵循 jQuery 的`param()`方法邏輯。 序列化程序還將按字母順序對參數進行排序。 | | `$http` | 此服務有助于通過瀏覽器的`XMLHttpRequest`對象或`JSONP`與遠程 HTTP 服務器進行通信。 | | `$xhrFactory` | 用于創建`XMLHttpRequest`對象的工廠函數。 | | `$httpBackend` | 用于處理瀏覽器不兼容。 | | `$interpolate` | 將帶有標記的字符串編譯為插值函數。 HTML `$compile`服務使用此服務進行數據綁定。 | | `$interval` | Angular 的`window.setInterval`包裝器。 | | `$locale` | 提供各種 Angular 組件的本地化規則。 | | `$location` | 它解析瀏覽器地址欄中的 URL，并使該 URL 可用于您的應用。 對地址欄中 URL 的更改將反映到`$location`服務中，對`$location`的更改將反映到瀏覽器地址欄中。 | | `$log` | 控制臺日志。 | | `$parse` | 將 Angular 表達式轉換為函數。 | | `$q` | 幫助您異步運行函數，并在完成處理后使用它們的返回值（或錯誤）。 | | `$rootElement` | Angular 應用的根元素。 | | `$rootScope` | 范圍提供了模型和視圖之間的分離。 這是針對根范圍的。 每個應用都有一個根范圍。 | | `$sceDelegate` | 由后端`$sce`使用。 | | `$sce` | 為 AngularJS 提供嚴格的上下文轉義服務。 | | `$templateRequest` | 它運行安全檢查，然后使用`$http`下載提供的模板，并在成功后將內容存儲在`$templateCache`中。 | | `$timeout` | Angular 的`window.setTimeout()`包裝器 | | `$window` | 對瀏覽器的`window`對象的引用。 盡管`window`在 JavaScript 中全局可用，但由于它是全局變量，因此會引起可測試性問題。 在 Angular 上，我們始終通過`$window`服務來引用它，因此可以對其進行覆蓋，刪除或模擬以進行測試。 | *參考： [https://docs.angularjs.org/api/ng/service](https://docs.angularjs.org/api/ng/service)* ## 創建自定義 Angular 服務 將應用的業務邏輯和通用操作放在一個地方總是一個好的設計。 這樣可以提高代碼的可重用性，并避免代碼重復。 您應將所有此類邏輯放入自定義 Angular 服務中。 這使代碼模塊化并且更易于維護。 此外，您的代碼變得更具可測試性。 請記住，Angular 為單元測試提供了一流的支持。 因此，我們可以為這些服務快速編寫測試，并避免許多可能的缺陷。 聲明 angularjs 服務的方式主要有兩種。 讓我們了解兩種方式： #### 使用`module.service('serviceName', function(){})` 當您使用`module.service()`和**創建服務時**，作為第二個參數傳遞的`function()`的實例成為 AngularJS 注冊并隨后在需要時注入到其他服務/控制器的服務對象。 使用`module.service()`在自定義服務對象中聲明方法的語法為： ```java module.service('DemoService', function() { //"this" will be used as service instance this.firstMethod = function() { //.. } this.someOtherMethod = function() { //.. } }); ``` #### 使用`module.factory('factoryName', function(){})` 當您使用`module.factory()`創建服務時，作為第二個參數傳遞的`function()`的**返回值**將成為 AngularJS 注冊并稍后在需要時注入到其他服務/控制器的服務對象。 使用`module.factory()`在自定義服務對象中聲明方法的語法為： ```java module.factory('DemoService', function() { //"factory" will be used as service instance var factory = {}; factory.firstMethod = function() { //.. } factory.someOtherMethod = function() { //.. } return factory; }); ``` ## 如何使用 AngularJS 服務 此示例演示了自定義服務的用法，該服務具有用于顯示不同時區的當前時間的邏輯。 首先創建自定義服務。 ```java var app = angular.module('myApp', []); //Create a function function TimeObj() { var cities = { 'Los Angeles': -8, 'New York': -5, 'London': 0 }; this.getTZDate = function(city) { var localDate = new Date(); var utcTime = localDate.getTime() + localDate.getTimezoneOffset() * 60 * 1000; return new Date(utcTime + (60 * 60 * 1000 * cities[city])); }; this.getCities = function() { var cList = []; for (var key in cities) { cList.push(key); } return cList; }; } //Register as service 'TimeService' app.service('TimeService', [TimeObj]); ``` 現在要使用此服務，請使用如下控制器： ```java app.controller('LAController', ['$scope', 'TimeService', function($scope, timeS) { $scope.myTime = timeS.getTZDate("Los Angeles").toLocaleTimeString(); } ]); app.controller('NYController', ['$scope', 'TimeService', function($scope, timeS) { $scope.myTime = timeS.getTZDate("New York").toLocaleTimeString(); } ]); app.controller('LondonController', ['$scope', 'TimeService', function($scope, timeS) { $scope.myTime = timeS.getTZDate("London").toLocaleTimeString(); } ]); ``` 現在，您可以在網頁中使用控制器顯示不同的時間。 ```java <html ng-app="myApp"> <head> <title>AngularJS Custom Time Service</title> <style> span { color: lightgreen; background-color: black; border: 3px ridge; padding: 2px; font: 14px/18px arial, serif; } </style> </head> <body> <h2>Custom Time Service:</h2><hr> <div ng-controller="LAController"> Los Angeles Time: <span>{{myTime}}</span> </div><hr> <div ng-controller="NYController"> New York Time: <span>{{myTime}}</span> </div><hr> <div ng-controller="LondonController"> London Time: <span>{{myTime}}</span> </div> </body> </html> ``` 輸出將如下所示： 請參閱 [CodePen](https://codepen.io) 上的 [Angular 服務演示 – 時區示例](https://codepen.io/howtodoinjava/pen/jWxYKB/)，作者為 Lokesh（[@howtodoinjava](https://codepen.io/howtodoinjava)）。 這就是 **AngularJS 服務入門教程**的全部內容。 將我的問題放在評論部分。 學習愉快！ {% endraw %}