Директива AngularJS с примером: ng-init, ng-repeat, ng-app, ng-model

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

Директива в AngularJS - это команда, которая дает HTML новые функции. Когда angular просматривает HTML-код, он сначала находит директивы на странице, а затем соответствующим образом анализирует HTML-страницу.

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

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

В этом руководстве вы узнаете:

Как создать директиву
ng-app
ng-init
нг-модель
нг-повтор

Как создать директиву

Как мы определили во введении, директивы AngularJS - это способ расширить функциональность HTML.

В AngularJS определены 4 директивы.

Ниже приведен список директив AngularJS с примерами, объясняющими каждую из них.

1) ng-app

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

В приведенном ниже примере показано, как использовать директиву ng-app. В этом примере мы просто собираемся показать, как сделать обычное HTML-приложение приложением angularJS.

Event Registration
Guru99 Global Event
Tutorial Name : {{ "Angular" + "JS"}}

Пояснение к коду:

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

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

Выход:

Вывод ясно показывает вывод выражения, которое стало возможным только потому, что мы определили приложение как приложение angularjs.

2) ng-init

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

В приведенном ниже примере показано, как использовать директиву ng-init.

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

Event Registration
Guru99 Global Event
Tutorial Name : {{ TutorialName}}

Пояснение к коду:

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

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

Выход:

На выходе

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

3) нг-модель

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

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

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

Event Registration
Guru99 Global Event
People : Registration Price : Total : {{quantity * price}}

Пояснение к коду:

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

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

Выход:

Выходные данные ясно показывают умножение значений для людей и стоимости регистрации.

Теперь, если вы перейдете к текстовым полям и измените значение цены для людей и регистрации, итоговая сумма изменится автоматически.

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

4) ng-repeat (нг-повтор)

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

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

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

Event Registration
Guru99 Global Event


{{names}}

Пояснение к коду:

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

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

Выход:

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

Резюме

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