Русский

Tutoriel AngularJS

Applications AngularJS

AngularJS - HTML DOM

Здравствуйте,野心勃勃的网页开发者们！今天，我们将深入探讨AngularJS的奇妙世界，以及它是如何与HTML DOM（文档对象模型）交互的。作为您友好的邻里计算机老师，我很兴奋能引导你们开启这段旅程。如果你是编程新手，不用担心——我们将从基础开始，逐步提升。那么，拿起一杯咖啡（或者茶，如果你喜欢的话），让我们开始吧！

AngularJS - HTML DOM

AngularJS和HTML DOM简介

在我们具体探讨之前，让我们快速了解一下AngularJS和HTML DOM是什么。

AngularJS是一个强大的JavaScript框架，它通过添加新的属性扩展HTML，使得创建动态网页应用变得更加容易。这就好像给你的普通HTML赋予了超能力！

另一方面，HTML DOM是HTML文档的编程接口。它将文档的结构表示为树状层次结构，允许你访问和操作网页的内容、结构和样式。

现在，让我们探讨一下AngularJS如何通过其指令增强我们与HTML DOM的工作能力。

ng-disabled指令

ng-disabled指令就像你的HTML元素的交通信号灯。它可以根据条件启用或禁用元素。让我们来看一个例子：

<input type="checkbox" ng-model="myCheckbox">
<button ng-disabled="!myCheckbox">Нажми меня!</button>

在这个例子中，按钮在被勾选框勾选之前是禁用的。就像告诉按钮：“除非你的朋友勾选框说可以，否则你不能玩！”

当勾选框未勾选时，myCheckbox是false，所以!myCheckbox是true，禁用按钮。当勾选时，则相反，启用按钮。

ng-show指令

接下来是ng-show指令。把它想象成魔术师的斗篷——它可以根据条件使元素出现或消失。下面是如何工作的：

<p ng-show="showSecret">Секретный код - 42!</p>
<button ng-click="showSecret = !showSecret">
  {{showSecret ? 'Скрыть' : 'Показать'}} Секрет
</button>

在这个例子中，只有当showSecret为true时，包含秘密代码的段落才会显示。按钮切换这个值。这就好像和你的网页元素玩捉迷藏！

ng-hide指令

ng-hide指令是ng-show的淘气双胞胎。当条件为true时，ng-show显示元素，而ng-hide则隐藏它们。让我们看看它是如何工作的：

<div ng-hide="loading">
  <h2>Добро пожаловать на мой сайт!</h2>
  <p>Это содержимое загрузится, когда будет готово.</p>
</div>
<p ng-show="loading">Загрузка... Пожалуйста, подожди.</p>

在这里，我们隐藏了主要内容，在页面加载时显示加载消息。当loading变为false时，就像拉开帷幕，展示你的网站！

ng-click指令

ng-click指令就像在你的电视遥控器上添加了一个按钮——它让你定义当元素被点击时会发生什么。这里有一个简单的例子：

<button ng-click="count = count + 1" ng-init="count=0">
  Кликnięć: {{count}}
</button>

这创建了一个按钮，用来计算它被点击了多少次。每次点击都会增加count变量，该变量显示在按钮文本中。这就像有一个个人的点击计数器！

示例：组合所有内容

现在，让我们将这些指令组合成一个更复杂的例子。想象一下我们在创建一个简单的任务管理器：

<div ng-app="taskManager" ng-controller="taskCtrl">
  <h2>Мой менеджер задач</h2>

  <input type="text" ng-model="newTask" placeholder="Введите новую задачу">
  <button ng-click="addTask()" ng-disabled="!newTask">Добавить задачу</button>

  <ul>
    <li ng-repeat="task in tasks">
      {{task}}
      <button ng-click="removeTask($index)">Сделано</button>
    </li>
  </ul>

  <p ng-show="tasks.length == 0">Задач пока нет. Добавьте их сверху!</p>

  <button ng-click="clearAll()" ng-hide="tasks.length == 0">Очистить все задачи</button>
</div>

<script>
var app = angular.module('taskManager', []);
app.controller('taskCtrl', function($scope) {
  $scope.tasks = [];

  $scope.addTask = function() {
    if ($scope.newTask) {
      $scope.tasks.push($scope.newTask);
      $scope.newTask = '';
    }
  };

  $scope.removeTask = function(index) {
    $scope.tasks.splice(index, 1);
  };

  $scope.clearAll = function() {
    $scope.tasks = [];
  };
});
</script>

让我们分解一下：

  1. 我们使用ng-disabled来防止添加空任务。
  2. ng-click用于添加任务、删除单个任务和清除所有任务。
  3. ng-show在没有任务时显示消息。
  4. ng-hide在没有任务时隐藏“清除所有”按钮。
  5. 我们还引入了ng-repeat，为我们的数组中的每个任务创建一个列表项。

输出

当你运行这段代码时，你会看到一个简单但功能齐全的任务管理器。你可以添加任务、将它们标记为已完成（删除它们）和清除所有任务。UI会根据你的操作动态更新，展示了AngularJS指令的力量。

结论

好了，伙计们！我们已经探讨了AngularJS用于操作HTML DOM的一些最常用的指令。这些工具让你能够轻松创建动态、响应式的网页应用。记住，熟能生巧，所以不要害怕在你的项目中尝试这些指令。

以下是我们在本文中讨论的指令的快速参考表：

指令 目的
ng-disabled 基于条件禁用元素
ng-show 当条件为true时显示元素
ng-hide 当条件为true时隐藏元素
ng-click 指定元素被点击时的行为

继续编码，继续学习，最重要的是，享受乐趣！网页开发的世界是广阔和令人兴奋的，而你才刚刚开始。下次见，快乐编码！

Credits: Image by storyset

Предыдущий учебник:
AngularJS - Таблицы
Следующий учебник:
AngularJS - Модули