AngularJS 是一个流行的前端 JavaScript 框架，它使得在 web 应用程序中处理 HTML DOM 变得更加简单和高效。在本章节中，我们将深入探讨 AngularJS 如何处理 HTML DOM，并且提供一些示例代码帮助你更好地理解。
AngularJS 指令
AngularJS 使用指令（Directives）来扩展 HTML，并且使得 HTML 变得更加动态和交互。指令是 AngularJS 的核心概念之一，通过指令，我们可以在 HTML 中添加逻辑、控制 DOM 元素的显示和行为。
下面是一个简单的示例，展示如何在 HTML 中使用 AngularJS 指令来控制 DOM：
--------- -----
----- --------- ---------------
------
----- ----------------
---------------- --------- ---------------
------- ------------------------------------------------------------------------------------
-------
------
---- -----------------------
------- ------------------------------ -----------
-- -----------------------------------------
------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
-------------- - ------- ------------
---------------------- - ------
------------------ - ---------- -
---------------------- - -----
--
---
---------
-------
-------在上面的示例中，我们定义了一个名为 myApp 的 AngularJS 应用程序，并且创建了一个控制器 myCtrl，在控制器中定义了一个 showMessage 函数和一个 showMessageFlag 变量。当点击按钮时，showMessage 函数会将 showMessageFlag 设置为 true，从而显示消息。
AngularJS 双向数据绑定
AngularJS 提供了双向数据绑定的功能，这意味着当数据模型发生变化时，视图会自动更新，反之亦然。这种机制使得开发者不需要手动操作 DOM，而是专注于数据处理和逻辑。
下面是一个简单的双向数据绑定示例：
--------- -----
----- --------- ---------------
------
----- ----------------
---------------- ------- ---- ------- ---------------
------- ------------------------------------------------------------------------------------
-------
------
---- -----------------------
------ ----------- --------------- ------------------ ---- ------
--------- -------------
------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
----------- - ------------
---
---------
-------
-------在上面的示例中，我们使用 ng-model 指令将输入框和数据模型 name 进行绑定，当输入框中的值发生变化时，name 的值也会相应地更新，从而实现双向数据绑定。
这就是 AngularJS 处理 HTML DOM 的一些基本概念和示例，希望能帮助你更好地理解和应用 AngularJS。在接下来的章节中，我们将继续深入探讨 AngularJS 的其他功能和特性。