AngularJS 是目前极为流行的前端 JavaScript 框架之一，它使用了诸如控制器、服务和指令等多个不同的概念和语言结构，让开发者可以更好地创建可维护、可扩展、易用的 Web 应用。在此，我们将详细介绍这些 AngularJS 概念的不同之处，以及它们在应用中的使用方法和作用。
控制器
控制器是 AngularJS 中最常用的概念之一，在应用中被用来处理各种关于视图（View）和数据（Data）之间的交互逻辑。控制器的主要工作是为要展示的数据提供一个环境，并通过绑定到视图（View）的指令与 HTML 页面中的元素协作，让这些数据在用户的浏览器上得以展示和操作。
控制器的 JavaScript 代码通常按如下方式创建：
--- ----- - ----------------------- ---- -------------------------------- ---------------- - -------------- - ------- -------- ---
代码解释：
- 首先，我们创建了一个模块（Module）实例，并声明了一个空的依赖数组，其目的是将其赋值给变量 myApp；
- 然后，我们调用了 myApp.controller 方法，将控制器（myController）的逻辑封装为一个函数，该函数接受一个参数 $scope，并将在 $scope 对象中创建一个 message 属性，赋值为 ‘Hello, world!’；
- 最终，该控制器将在 HTML 页面中被如下调用：
---- ----------------------------- -- ------- -- ------
代码解释：
- 我们通过 ng-controller 指令告诉 AngularJS，该 HTML 元素的控制器应该是 myController；
- 接着，我们使用双大括号语法将控制器实例化的 message 变量输出到该元素的文本节点中。
服务
服务是 AngularJS 中很有用的概念，它指在 AngularJS 应用中提供一个可被多个控制器（Controllers）和其他服务调用的服务（Service）。服务的主要作用包括：把一些通用的代码和逻辑抽离到单独的文件中，便于代码的复用和维护；所有的服务都在应用启动时被注入（Injected）到控制器和其他服务中，因此它们在应用中起着极为重要的作用。
一个 AngularJS 服务的代码通常被编写在单独的 .js 文件中，按如下方式创建：
--- ----- - ----------------------- ----
-------------------------- ---------- -
---------------- - ---------- -
------ ------- --------
--
---代码解释：
- 首先，我们定义了一个名为 myService 的服务，它的构造函数，是一个普通的 JavaScript 函数，我们在其上设置了一个名为 doSomething 的属性，其返回值为 ‘Hello, world!’；
- 然后声明了一个空的依赖数组，并将该服务通过 myApp.service 方法注册到应用中；
- 最终，我们就可以在任何需要使用该服务的地方，调用它的 doSomething 方法，如下所示：
--- ----- - ----------------------- ---- -------------------------------- ---------------- ---------- - -------------- - ------------------------ ---
代码解释：
- 首先，我们注入了 myService 服务到控制器中；
- 然后，我们调用它的 doSomething 方法，并将其返回值赋值给 $scope.message；
- 接着，我们可以在对应的 HTML 页面中通过双大括号语法输出它，如下所示：
---- ----------------------------- -- ------- -- ------
指令
指令是 AngularJS 中最为强大、灵活的概念之一，在应用中被用来扩展 HTML 标记（Markup）中的新功能和行为，并将这些功能和行为封装为包含模板（Template）和逻辑的独立组件（Component）。指令的主要作用包括：与控制器、服务等其他 AngularJS 概念协作，更好地结构化和组织代码，分离关注点。
一个 AngularJS 指令的代码通常被编写在单独的 .js 文件中，按如下方式创建：
--- ----- - ----------------------- ----
------------------------------ ---------- -
------ -
--------- ----
--------- -------- ------- ----------
------ ---
----------- ---------- ---------------- -
-------------- - ------- --------
---
----- --------------- -------- ------ -
-----------------------------
-
--
---代码解释：
- 首先，我们定义了一个名为 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 声明一个 HTML 元素；
- 然后，AngularJS 会自动解析该标记，并调用与之相匹配的指令；
- 最终，该指令将在 HTML 页面中呈现出一个带有文字 ‘Hello, world!’ 的 div 元素，并添加了名为 my-class 的 CSS 类。
总结
通过本文的介绍，我们了解了 AngularJS 中三种主要的概念：控制器、服务和指令的区别和作用。掌握这些概念，可以更好地利用 AngularJS 框架，并了解其作为一个完整的 MVC 框架的工作原理，使我们在设计和实现 Web 应用的时候更加得心应手。
参考文献
- https://docs.angularjs.org/tutorial
- https://www.tutorialspoint.com/angularjs/angularjs_services.htm
- https://www.w3schools.com/angular/angular_directives.asp
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653f5bc97d4982a6eb8e794c