AngularJS 是一个非常流行的前端框架，它使用了一些独有的概念来帮助我们构建动态 Web 应用程序。其中之一就是服务（service）。服务是一种可以在整个应用程序中共享数据和逻辑的组件。在本篇文章中，我们将学习如何在控制器和视图中全局访问服务。
服务简介
服务是 AngularJS 中最重要的组件之一。它们是单例对象，由 AngularJS 容器创建和管理。通过将业务逻辑和数据处理移到服务中，我们可以轻松地在控制器、指令、过滤器等组件中重复使用这些逻辑和数据。服务也是实现依赖注入（Dependency Injection）的关键组件之一。
在 AngularJS 中，有几种类型的服务，例如：
- 内置服务：AngularJS 为我们提供了许多内置服务，如 $http、$q、$timeout 等。
- 自定义服务：我们可以创建自己的服务，并将它们注册到 AngularJS 容器中来实现全局访问。
让服务全局访问
默认情况下，AngularJS 将服务设置为私有的。这意味着它们只能在它们所属的模块中访问。如果我们想在整个应用程序中访问服务，我们需要将它们注册为公共服务。下面是一种简单的方法来实现这一点：
angular.module('myApp').factory('myService', function() {
var service = {};
// Service logic goes here
return service;
});在上面的代码中，我们使用 factory 方法来创建一个服务，名为 myService。该服务返回一个对象，包含所有的逻辑和数据。通过将该服务注册到 myApp 模块中，我们可以在整个应用程序中访问它。
在控制器中使用服务
一旦我们将服务设置为全局可访问，我们就可以在控制器中使用它们了。下面是一个简单的例子：
angular.module('myApp').controller('myController', function($scope, myService) {
$scope.data = myService.getData();
// Controller logic goes here
});在上面的代码中，我们将 myService 作为依赖注入到 myController 控制器中。然后，我们可以在控制器逻辑中使用 myService 来获取数据并进行处理。
在视图中使用服务
服务不仅可在控制器中使用，还可在视图中使用。下面是一个简单的例子：
<div ng-controller="myController">
<p>{{ data }}</p>
<!-- View logic goes here -->
</div>在上面的代码中，我们使用 myController 控制器来处理视图逻辑。在视图中，我们可以通过双括号语法（{{}}）将 myService 返回的数据绑定到 HTML 元素中。
结论
在本篇文章中，我们学习了如何让服务在控制器和视图中全局访问。通过注册服务为公共服务，并将它们注入到需要使用它们的控制器和指令中，我们可以轻松地在整个应用程序中共享数据和逻辑。希望这篇文章能够帮助你更好地理解 AngularJS 中的服务和依赖注入机制。
示例代码：https://codepen.io/chatgpt/pen/bGdKjBZ
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30630