Русский

Учебник по AngularJS

Приложения AngularJS

AngularJS - Директивы: Путеводитель для начинающих

Здравствуйте, будущие маги AngularJS! Сегодня мы отправимся в увлекательное путешествие в мир директив AngularJS. Не волнуйтесь, если вы новички в программировании - я буду вашим доброжелательным проводником, объясняя все шаг за шагом. Так что возьмите кружку кофе (или чая, если это ваше дело) и погружайтесь с нами!

AngularJS - Directives

Что такое директивы?

Прежде чем мы начнем, давайте поймем, что такое директивы. Представьте директивы как особые инструкции, которые мы даем HTML. Это как магические заклинания, которые оживляют наши веб-страницы динамическим контентом и поведением. Круто, правда?

Теперь давайте рассмотрим некоторые из самых commonly используемых директив в AngularJS.

Директива ng-app

Директива ng-app подобна фундаменту нашего дома AngularJS. Она говорит AngularJS: "Эй, отсюда начинается моя aplikacija!"

Пример:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app>
<p>Добро пожаловать в мою aplikaciju AngularJS!</p>
</body>
</html>

В этом примере мы добавили ng-app к тегу <body>. Это говорит AngularJS, что все, что находится внутри <body>, является частью нашей aplikaciji AngularJS.

Директива ng-init

Директива ng-init похожа на шляпу魔术ника - она позволяет нам инициализировать переменные прямо в HTML. Это很好 для простых демонстраций, но в реальных aplikacijah мы обычно инициализируем данные в контроллере.

Пример:

<div ng-app ng-init="firstName='John'; lastName='Doe'">
<p>Имя - {{ firstName + " " + lastName }}</p>
</div>

Здесь мы используем ng-init для установки значений firstName и lastName. Затем мы отображаем эти значения с помощью выражений AngularJS (те двойные фигурные скобки).

Директива ng-model

Директива ng-model похожа на двустороннюю улицу между вашим HTML и данными вашего aplikaciji. Она может:

  1. Связать input, select или textarea с свойством на scope
  2. Предоставлять типовую проверку данных aplikaciji
  3. Устанавливать CSS классы для элемента
  4. Связывать HTML элементы с проверкой формы

Пример:

<div ng-app>
<input type="text" ng-model="name">
<p>Привет, {{ name }}!</p>
</div>

В этом примере все, что вы вводите в поле ввода, немедленно появится после "Привет," в абзаце ниже. Это как магия, но это всего лишь сила ng-model!

Директива ng-repeat

Директива ng-repeat похожа на ксерокс для HTML элементов. Она может повторять набор HTML элементов для каждого элемента в массиве. Это super полезно для создания списков или таблиц динамически.

Пример:

<div ng-app ng-init="fruits=['Apple', 'Banana', 'Orange']">
<ul>
<li ng-repeat="fruit in fruits">
{{ fruit }}
</li>
</ul>
</div>

Это создаст список фруктов. Директива ng-repeat будет повторять элемент <li> для каждого фрукта в нашем массиве.

Комплексный пример

Теперь давайте объединим все это в более сложном примере:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app ng-init="students=[
{name:'John Doe', grade: 85},
{name:'Jane Smith', grade: 92},
{name:'Bob Johnson', grade: 78}
]">
<h2>Трекер оценок студентов</h2>
<table border="1">
<tr>
<th>Имя</th>
<th>Оценка</th>
</tr>
<tr ng-repeat="student in students">
<td>{{ student.name }}</td>
<td>{{ student.grade }}</td>
</tr>
</table>
<br>
<h3>Добавить нового студента</h3>
<form>
Имя: <input type="text" ng-model="newName"><br>
Оценка: <input type="number" ng-model="newGrade"><br>
<button ng-click="students.push({name:newName, grade:newGrade})">Добавить студента</button>
</form>
</body>
</html>

Давайте разберем это:

  1. Мы начинаем с ng-app в теге <body>, чтобы инициализировать нашу aplikaciju AngularJS.
  2. Мы используем ng-init для создания начального массива студентов.
  3. Мы используем ng-repeat для создания строк таблицы для каждого студента.
  4. Мы используем ng-model для绑定 вводимых полей к переменным.
  5. Мы используем ng-click (новую директиву!) для добавления нового студента в массив при нажатии кнопки.

Этот пример демонстрирует, как эти директивы работают вместе, чтобы создать динамичное, интерактивное веб-приложение. Вы можете добавлять новых студентов, и они немедленно появятся в таблице!

Заключение

Поздравления! Вы только что сделали свои первые шаги в мир директив AngularJS. Мы рассмотрели основы ng-app, ng-init, ng-model и ng-repeat. Это всего лишь несколько из многих директив, которые предлагает AngularJS, но они являются отличной отправной точкой.

помните, что обучение программированию похоже на изучение нового языка. Это требует времени и практики, но sooner или later, вы будете свободно "говорить" на AngularJS! Продолжайте экспериментировать с этими директивами, пробуйте комбинировать их по-разному, и, самое главное, получайте удовольствие!

Счастливого кодирования, будущие мастера AngularJS!

Credits: Image by storyset

Предыдущий учебник:
AngularJS - الأولى Приложение
Следующий учебник:
AngularJS - Выражения