AngularJS：AngularJS 应用中的控制器、服务和指令的区别-JavaScript中文网-JavaScript教程资源分享门户

AngularJS 是目前极为流行的前端 JavaScript 框架之一，它使用了诸如控制器、服务和指令等多个不同的概念和语言结构，让开发者可以更好地创建可维护、可扩展、易用的 Web 应用。在此，我们将详细介绍这些 AngularJS 概念的不同之处，以及它们在应用中的使用方法和作用。

控制器

控制器是 AngularJS 中最常用的概念之一，在应用中被用来处理各种关于视图（View）和数据（Data）之间的交互逻辑。控制器的主要工作是为要展示的数据提供一个环境，并通过绑定到视图（View）的指令与 HTML 页面中的元素协作，让这些数据在用户的浏览器上得以展示和操作。

控制器的 JavaScript 代码通常按如下方式创建：

var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope) {
  $scope.message = 'Hello, world!';
});

代码解释：

首先，我们创建了一个模块（Module）实例，并声明了一个空的依赖数组，其目的是将其赋值给变量 myApp；
然后，我们调用了 myApp.controller 方法，将控制器（myController）的逻辑封装为一个函数，该函数接受一个参数 $scope，并将在 $scope 对象中创建一个 message 属性，赋值为 ‘Hello, world!’；
最终，该控制器将在 HTML 页面中被如下调用：

<div ng-controller="myController">
  {{ message }}
</div>

代码解释：

我们通过 ng-controller 指令告诉 AngularJS，该 HTML 元素的控制器应该是 myController；
接着，我们使用双大括号语法将控制器实例化的 message 变量输出到该元素的文本节点中。

服务

服务是 AngularJS 中很有用的概念，它指在 AngularJS 应用中提供一个可被多个控制器（Controllers）和其他服务调用的服务（Service）。服务的主要作用包括：把一些通用的代码和逻辑抽离到单独的文件中，便于代码的复用和维护；所有的服务都在应用启动时被注入（Injected）到控制器和其他服务中，因此它们在应用中起着极为重要的作用。

一个 AngularJS 服务的代码通常被编写在单独的 .js 文件中，按如下方式创建：

var myApp = angular.module('myApp', []);
myApp.service('myService', function() {
  this.doSomething = function() {
    return 'Hello, world!';
  };
});

代码解释：

首先，我们定义了一个名为 myService 的服务，它的构造函数，是一个普通的 JavaScript 函数，我们在其上设置了一个名为 doSomething 的属性，其返回值为 ‘Hello, world!’；
然后声明了一个空的依赖数组，并将该服务通过 myApp.service 方法注册到应用中；
最终，我们就可以在任何需要使用该服务的地方，调用它的 doSomething 方法，如下所示：

var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope, myService) {
  $scope.message = myService.doSomething();
});

代码解释：

首先，我们注入了 myService 服务到控制器中；
然后，我们调用它的 doSomething 方法，并将其返回值赋值给 $scope.message；
接着，我们可以在对应的 HTML 页面中通过双大括号语法输出它，如下所示：

<div ng-controller="myController">
  {{ message }}
</div>

指令

指令是 AngularJS 中最为强大、灵活的概念之一，在应用中被用来扩展 HTML 标记（Markup）中的新功能和行为，并将这些功能和行为封装为包含模板（Template）和逻辑的独立组件（Component）。指令的主要作用包括：与控制器、服务等其他 AngularJS 概念协作，更好地结构化和组织代码，分离关注点。

一个 AngularJS 指令的代码通常被编写在单独的 .js 文件中，按如下方式创建：

// javascriptcn.com 代码示例
var myApp = angular.module('myApp', []);
myApp.directive('myDirective', function() {
  return {
    restrict: 'E',
    template: '<div>{{ message }}</div>',
    scope: {},
    controller: ['$scope', function($scope) {
      $scope.message = 'Hello, world!';
    }],
    link: function(scope, element, attrs) {
      element.addClass('my-class');
    }
  };
});

代码解释：

首先，我们定义了一个名为 myDirective 的指令，并通过 restrict 属性指定它可以是一个元素（E），一个属性（A），一个类（C）或注释（M）的形式；
然后，我们通过 template 属性为该指令指定一个包含单个 div 元素的 HTML 模板，并在其中使用双大括号语法展示 message 属性；
接着，我们为该指令创建了一个隔离的作用域（Isolated Scope），通过使用 scope 属性，并将其设置为空对象。这样可以确保该指令中的 message 变量不会影响到父级作用域，从而保持了良好的封装性；
然后，我们通过 controller 属性定义了一个控制器，该控制器中使用了 $scope 变量，并在其上设置了一个名为 message 的属性，被用于传递到 HTML 模板中；
最终，我们通过 link 属性指定该指令的链接函数（Link Function），并在其中为指令所绑定的元素添加了一个名为 my-class 的 CSS 类，以达到美化的目的。

一个 AngularJS 指令在 HTML 页面中可以通过如下方式被调用：

<my-directive></my-directive>

代码解释：

首先，我们用自定义标记名称 my-directive 声明一个 HTML 元素；
然后，AngularJS 会自动解析该标记，并调用与之相匹配的指令；
最终，该指令将在 HTML 页面中呈现出一个带有文字 ‘Hello, world!’ 的 div 元素，并添加了名为 my-class 的 CSS 类。

总结

通过本文的介绍，我们了解了 AngularJS 中三种主要的概念：控制器、服务和指令的区别和作用。掌握这些概念，可以更好地利用 AngularJS 框架，并了解其作为一个完整的 MVC 框架的工作原理，使我们在设计和实现 Web 应用的时候更加得心应手。

参考文献

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653f5bc97d4982a6eb8e794c