AngularJS 是一个用于构建动态 Web 应用程序的 JavaScript 框架，它提供了很多强大的功能，如双向数据绑定、指令、过滤器、服务等等。其中，服务是 AngularJS 中非常重要的部分，它允许我们在不同的组件之间共享代码和功能。在本文中，我们将深入介绍 AngularJS 中的服务及其使用方式。
服务的概念
在 AngularJS 中，服务是一个可注入的对象，它可以用于封装业务逻辑，提供数据和方法的访问，以及实现页面之间的通信等功能。服务是一个单例对象，通常在全局范围内使用，可以通过依赖注入的方式被其它组件使用。
内置服务
AngularJS 提供了很多内置服务，我们可以直接在应用程序中使用它们。下面是一些常用的内置服务及其使用方式。
$http 服务
$http 服务用于发起 HTTP 请求，并返回 Promise 对象。我们可以使用 GET、POST、PUT、DELETE 等方法来发送请求，并通过 then() 方法处理响应。以下是一个简单的示例：
angular.module('myApp', [])
.controller('myController', function($http) {
$http.get('/api/users')
.then(function(response) {
console.log(response.data);
});
});上面的示例使用 $http.get() 方法发送 GET 请求，然后通过 then() 方法处理响应。
$timeout 服务
$timeout 服务用于延迟执行代码，并返回 Promise 对象。以下是一个简单的示例：
angular.module('myApp', [])
.controller('myController', function($timeout) {
$timeout(function() {
console.log('Hello, world!');
}, 1000);
});上面的示例使用 $timeout() 方法延迟执行 console.log() 方法，等待 1000 毫秒后输出 'Hello, world!'。
$rootScope 服务
$rootScope 服务是 AngularJS 应用程序中的根作用域对象，它是所有作用域对象的父级。我们可以使用 $rootScope 对象在应用程序的不同部分中共享数据和方法。以下是一个简单的示例：
angular.module('myApp', [])
.controller('myController', function($scope, $rootScope) {
$scope.name = 'Alice';
$rootScope.sayHello = function() {
console.log('Hello, ' + $scope.name + '!');
};
});上面的示例在控制器中定义了一个 $scope 对象和一个 $rootScope 对象。$scope 对象用于在控制器和视图之间传递数据，而 $rootScope 对象用于在全局范围内共享数据和方法。在这个例子中，我们将 $rootScope 对象的 sayHello() 方法定义为一个可以访问 $scope 对象中的 name 属性的函数。
自定义服务
除了内置服务，我们还可以定义自己的服务来封装业务逻辑和提供功能。我们可以通过 AngularJS 的模块机制来定义服务，然后可以在应用程序的其它组件中使用它们。以下是一个简单的自定义服务的示例：
-- -------------------- ---- -------
----------------------- ---
----------------------- ---------- -
--- ----- - -- --- -- ----- ------- -- - --- -- ----- ----- ---
-------- ---------- -
------ ------
-
-------- --------------- -
------ ------------------------- -
------ ------- --- ---
---
-
------ -
--------- ---------
------------ -----------
--
--
--------------------------- ---------------- ------------ -
------------ - -----------------------
------------------ - ------------ -
------ ----------------------------
--
---上面的示例定义了一个名为 userService 的工厂函数，它返回一个包含 getUsers() 和 getUserById() 方法的对象。在控制器中，我们将 userService 注入到 $scope 对象中，然后可以在视图中使用它。$scope.users 变量用于存储 userService.getUsers() 方法返回的用户列表，而 $scope.getUserById() 方法使用 userService.getUserById() 方法在用户列表中查找指定 ID 的用户。
使用服务
我们可以在控制器、指令、过滤器等组件中使用服务。以下是一个使用服务的示例：
-- -------------------- ---- -------
----------------------- ---
----------------------- ---------- -
--- ----- - -- --- -- ----- ------- -- - --- -- ----- ----- ---
-------- ---------- -
------ ------
-
-------- --------------- -
------ ------------------------- -
------ ------- --- ---
---
-
------ -
--------- ---------
------------ -----------
--
--
--------------------------- ---------------- ------------ -
------------ - -----------------------
------------------ - ------------ -
------ ----------------------------
--
--
---------------------- --------------------- -
------ -
--------- ----
--------- -------- --------------- -- --------------------------------
----- --------------- -------- ------ -
----------- - -----------------------
-
--
---上面的示例定义了一个名为 userList 的指令，用于在页面中显示用户列表。我们在指令中注入了 userService，然后在 link() 方法中调用 userService.getUsers() 方法获取用户列表，并将它们赋值给 scope.users 变量。这样，我们就可以在指令的模板中使用 ng-repeat 指令来显示用户的名称。同时，在控制器中也可以注入 userService，并通过它的方法来访问用户信息。
结论
AngularJS 中的服务提供了一种灵活和可重用的方式来实现业务逻辑和功能。我们可以使用 AngularJS 的内置服务来快速开发应用程序，也可以定义自己的服务来满足应用程序的特定需求。掌握 AngularJS 中的服务，可以让我们更好地构建动态 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670c6f09966352fad49a7cb9