Директивы AngularJS: ng-init, ng-app, ng-model и ng-repeat

Автор: Джеймс Хартман Джеймс Хартман
Hours обновлено

⚡ Умное резюме

Директивы AngularJS расширяют возможности обычного HTML, добавляя новое поведение. Маркеры ng-app, ng-init, ng-model и ng-repeat инициализируют приложение, заполняют локальные данные, привязывают элементы управления формы к модели и клонируют элементы один раз для каждого элемента коллекции.

  • 🧩 Основная идея: Директива — это маркер на HTML-элементе, который указывает компилятору AngularJS добавить к нему поведение.
  • 🚀 Bootstrap Точка: ng-app объявляет корневой элемент и автоматически запускает AngularJS сразу после загрузки страницы.
  • 🧮 Местные данные: ng-init присваивает начальные значения переменным области видимости внутри разметки, при этом контроллер не требуется.
  • 🔄 Двусторонняя переплетка: ng-model связывает поле ввода, выпадающий список или текстовое поле со свойством области видимости, поэтому изменения мгновенно обновляют модель.
  • 📋 Повторяющаяся разметка: ng-repeat клонирует свой основной элемент один раз для каждого элемента массива или объекта.
  • 🇧🇷 Четыре формы обращения: Свойство restrict принимает значения E, A, C и M для синтаксиса элемента, атрибута, класса и комментария.
  • 📚 Более обширная библиотека: AngularJS содержит десятки встроенных директив, среди которых ng-bind, ng-if, ng-show, ng-class и ng-click.
Читать

Директивы AngularJS

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

A Директива В AngularJS директива `ng-model` добавляет HTML-коду новые функции. При обработке HTML-кода AngularJS сначала находит директивы, а затем соответствующим образом анализирует HTML-страницу. Простой пример директивы AngularJS, которую мы рассматривали в предыдущих главах, — это директива `ng-model`. Эта директива используется для привязки нашей модели данных к нашему представлению.

Примечание: В HTML-странице можно использовать базовый код AngularJS с директивами ng-init, ng-repeat и ng-model без необходимости применения контроллеров. Логика этих директив находится в файле AngularJS, который предоставляется... GoogleКонтроллеры — это следующий уровень программных конструкций AngularJS, позволяющие реализовать бизнес-логику, но, как уже упоминалось, для того, чтобы приложение считалось приложением AngularJS, наличие контроллера не является обязательным.

Но как же браузер в итоге запускает его?

Как работают директивы AngularJS в HTML

Как мы уже говорили во введении, директива AngularJS — это способ расширить функциональность HTMLКогда страница загружается, компилятор AngularJS обходит DOM, сопоставляет каждый элемент с зарегистрированными директивами и применяет найденное поведение.

AngularJS В комплекте идут десятки встроенных директив, а также любые, которые вы можете зарегистрировать самостоятельно. Четыре директивы, описанные ниже с примерами выполнения — ng-app, ng-init, ng-model и ng-repeat — являются первыми, с которыми знакомятся новички. Перед этими примерами обратите внимание на четыре способа написания директивы.

Какие четыре типа директив существуют в AngularJS?

Директива не всегда является атрибутом. Компилятор AngularJS может сопоставлять её по имени элемента, атрибуту, имени класса или комментарию, и каждая директива указывает, какие формы она принимает, через свой атрибут. restrict свойство. По умолчанию используется EAТаким образом, синтаксис элемента и атрибута работает, если не указано иное. Значение имеет наибольшее значение при написании собственной директивы, поскольку компилятор игнорирует любую форму, исключаемую значением restrict.

ограничить значение Совпало по Пример разметки Типичное использование
E Имя элемента Автономные блоки, владеющие шаблоном.
A Атрибут Добавление поведения к существующему элементу
C Имя класса Устаревшая разметка, которая не может принимать новые атрибуты
M КОММЕНТАРИЙ Редкий экземпляр, сохранен для обеспечения обратной совместимости.

Примечание: Наконечник: Предпочтительнее использовать синтаксис элементов и атрибутов. Официальный справочник директив AngularJS Рассматривает формы классов и комментариев как устаревшие параметры. Во всех приведенных ниже примерах используется синтаксис атрибутов.

СТАТЬИ ПО ТЕМЕ

ng-приложение в AngularJS

Эта директива используется для инициализации приложения AngularJS. Когда эта директива присутствует на HTML-странице, она, по сути, сообщает AngularJS, что эта HTML-страница является приложением AngularJS.

Пример использования ng-app

В приведенном ниже примере показано, как превратить обычное HTML-приложение в приложение AngularJS.

ng-приложение в AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="">

    Tutorial Name : {{ "Angular" + "JS"}}

</div>

</body>
</html>

⚠️ Внимание! В объявлении сохраняется оригинал. chrset="UTF 8"В точности как опубликовано. Правильный атрибут: charset="UTF-8".

Code Объяснение:

  1. Директива «ng-app» добавляется к тегу `<div>`, чтобы указать, что это приложение AngularJS. Обратите внимание, что директива «ng-app» может применяться к любому тегу, поэтому её можно также разместить в теге `<body>`.
  2. Поскольку мы определили это приложение как приложение AngularJS, теперь мы можем использовать функциональность AngularJS. В нашем случае мы используем выражения для простого объединения двух строк.

Если код выполнится успешно, отобразится следующий результат.

Выход:

ng-приложение в AngularJS

Результат наглядно демонстрирует вывод выражения, что стало возможным только благодаря тому, что мы определили приложение как приложение AngularJS. Следующая директива предоставляет свои данные.

ng-init в AngularJS

Это используется для инициализации данных приложения. Иногда для вашего приложения могут потребоваться локальные данные, и это можно сделать с помощью директивы ng-init.

Пример ng-init

В этом примере мы собираемся создать переменную с именем «TutorialName», используя директиву ng-init, и отобразить значение этой переменной на странице.

ng-init в AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="TutorialName='Angular JS'">

    Tutorial Name : {{ TutorialName}}

</div>

</body>
</html>

Code Объяснение:

  1. Директива ng-init добавляется в наш тег div для определения локальной переменной с именем «TutorialName», и ей присваивается значение «AngularJS».
  2. В AngularJS мы используем выражения для отображения результата работы переменной с именем «TutorialName», определенной в директиве ng-init.

Если код выполнится успешно, отобразится следующий результат.

Выход:

ng-init в AngularJS

На выходе

  • Результат ясно показывает вывод выражения, содержащего строку «AngularJS». Это связано с тем, что строка «AngularJS» присвоена переменной «TutorialName» в разделе ng-init.

Следующая директива отправляет данные с экрана обратно в модель.

ng-модель в AngularJS

И наконец, у нас есть директива ng-model, которая используется для привязки значения HTML-элемента управления к данным приложения.

Пример ng-модели

В этом примере

  • Мы собираемся создать две переменные, называемые «количество» и «цена». Эти переменные будут привязаны к двум элементам управления текстовым вводом.
  • Затем мы собираемся отобразить общую сумму на основе умножения значений цены и количества.

ng-модель в AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="quantity=1;price=5">

    People : <input type="number" ng-model="quantity">

    Registration Price : <input type="number" ng-model="price">

    Total : {{quantity * price}}

</div>

</body>
</html>

Code Объяснение:

  1. Директива ng-init добавляется в наш тег div для определения двух локальных переменных; одно называется «количество», а другое — «цена».
  2. Теперь мы используем директиву ng-model для привязки текстовых полей «Люди» и «Цена регистрации» к нашим локальным переменным «количество» и «цена» соответственно.
  3. Наконец, мы показываем итоговую сумму через выражение, которое представляет собой умножение переменных количества и цены.

Если код выполнится успешно, отобразится следующий результат.

Выход:

ng-модель в AngularJS

  • Вывод ясно показывает умножение значений «Люди» и «Цена регистрации».

Теперь, если вы измените значения полей «Количество человек» и «Цена регистрации» в текстовых полях, итоговая сумма изменится автоматически.

ng-модель в AngularJS

  • Приведенный выше результат лишь демонстрирует возможности привязки данных в AngularJS, которые достигаются с помощью... директива ng-модели.

Последний из четырех обрабатывает множество значений одновременно.

ng-повтор в AngularJS

Используется для повторения элемента HTML. В примере ниже показано, как использовать директива ng-repeat.

Пример ng-repeat

В этом примере

  • У нас будет массив названий глав в переменной массива и
  • затем используйте директиву ng-repeat, чтобы отобразить каждый элемент массива как элемент списка.

ng-повтор в AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="chapters=['Controllers','Models','Filters']">
    <ul>
        <li ng-repeat="names in chapters">
            {{names}}
        </li>
    </ul>

</div>

</body>
</html>

Code Объяснение:

  1. Директива ng-init добавляется в наш тег div для определения переменной под названием «chapters», которая представляет собой переменную массива, содержащую 3 строки.
  2. Элемент ng-repeat используется путем объявления встроенной переменной с именем «names» и обработки каждого элемента массива Chapters.
  3. Наконец, мы показываем значение локальной встроенной переменной «names».

Если код выполнится успешно, отобразится следующий результат.

Выход:

ng-повтор в AngularJS

  • Приведенный выше вывод просто показывает, что директива ng-repeat взяла каждое значение в массиве, называемом «главы», и создала элементы списка HTML для каждого элемента в массиве.

Эти четыре пункта охватывают запуск, данные, привязку и повторение. Ниже приведен список того, что следует дальше.

Другие часто используемые встроенные директивы AngularJS

Четыре приведенные выше директивы представляют собой исходный набор, а не всю библиотеку. Каждая запись ниже — это атрибут, который вы размещаете непосредственно на элементе, которым он управляет.

  • ng-bind: Записывает значение области видимости в текст элемента, не отображая при загрузке необработанные фигурные скобки.
  • ng-if: Удаляет элемент из DOM, если его выражение ложно, и перестраивает его, если истинно.
  • ng-show и ng-hide: TogglОтображение видимости с помощью CSS. Элемент остается в DOM, поэтому повторные переключения обходятся дешевле.
  • ng-class: Добавляет или удаляет CSS-классы из выражения, позволяя стилям следовать модели.
  • ng-click: При щелчке пользователя по элементу выполняется выражение или функция области видимости.
  • ng-controller: Прикрепляет контроллер к блоку разметки, когда размер страницы превышает возможности ng-init.
  • ng-disabled и ng-readonly: Устанавливайте атрибут соответствующей формы всякий раз, когда их выражение истинно.

В разделе «Часто задаваемые вопросы» ниже приведены ответы на вопросы, которые чаще всего возникают после просмотра этого списка.

Часто задаваемые вопросы (FAQ)

AngularJS нормализует имена атрибутов перед сопоставлением. Он удаляет любые префиксы x- или data-, а затем преобразует разделители в виде дефиса, двоеточия или подчеркивания в верблюжий регистр. Именно поэтому data-ng-app, x-ng-app и ng:app приводят к одной и той же директиве ngApp.

Оба метода выводят значение области видимости. Выражение интерполяции может кратковременно отображать свои исходные фигурные скобки до завершения загрузки AngularJS, в то время как ng-bind оставляет элемент пустым до завершения компиляции. Для текста, отображаемого в верхней части экрана, предпочтительнее использовать ng-bind.

Нет. Официальная поддержка AngularJS закончилась в январе 2022 года, поэтому никаких дальнейших патчей не выпускается. Существующие страницы продолжают работать, но новые проекты следует начинать на современном Angular, где эти директивы становятся компонентами и структурными директивами, такими как *ngIf и *ngFor.

Частично. Помощники, такие как Второй пилот GitHub Надежно перепишите ng-repeat как *ngFor и ng-if как *ngIf. Наследование областей видимости, двусторонние привязки и пользовательские функции связывания по-прежнему требуют проверки человеком, прежде чем перенесенный код будет выпущен.

Вставьте разметку, объявление модуля и вывод консоли в ChatGPT и спрашивает, какая директива не совпала. Обычно это выявляет отсутствующий ng-app, неправильно написанный атрибут или значение restrict, которое блокирует выбранный вами синтаксис.

Подведем итог этой публикации следующим образом: