Что такое директива AngularJS?
Директива в AngularJS — это команда, которая дает HTML новую функциональность. Когда angular проходит через HTML-код, он сначала находит директивы на странице, а затем соответствующим образом анализирует HTML-страницу.
Простым примером директивы AngularJS, которую мы видели в предыдущих главах, является «директива ng-model». Эта директива используется для привязки нашей модели данных к нашему представлению.
Примечание: Вы можете иметь основной угловой код на странице HTML с директивами ng-init, ng-repeat и ng-model без необходимости иметь контроллеры. Логика этих директив находится в файле Angular.js, предоставленном Google. Контроллеры — это конструкции углового программирования следующего уровня, которые допускают бизнес-логику, но, как уже упоминалось, для приложения, являющегося угловым, не обязательно иметь контроллер.
В этом уроке вы узнаете
Как создать директиву
Как мы определили во введении, директивы AngularJS — это способ расширить функциональность HTML.
В AngularJS определены 4 директивы.
Ниже приведен список директив AngularJS вместе с примерами, предоставленными для объяснения каждой из них.
1) нг-приложение
Это используется для инициализации приложения Angular.JS. Когда эта директива используется на HTML-странице, она в основном сообщает Angular, что эта HTML-страница является приложением angular.js.
В приведенном ниже примере показано, как использовать директиву ng-app. В этом примере мы просто покажем, как сделать обычное приложение HTML приложением 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>
Объяснение кода:
- Директива «ng-app» добавлена в наш тег div, чтобы указать, что это приложение является приложением angular.js. Обратите внимание, что директива ng-app может применяться к любому тегу, поэтому она также может быть помещена в тег body.
- Поскольку мы определили это приложение как приложение angular.js, теперь мы можем использовать функциональность angular.js. В нашем случае мы используем выражения для простого объединения двух строк.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий вывод.
Вывод:
Вывод ясно показывает вывод выражения, которое стало возможным только потому, что мы определили приложение как приложение angularjs.
2) нг-иници
Это используется для инициализации данных приложения. Иногда вам могут потребоваться некоторые локальные данные для вашего приложения, это можно сделать с помощью директивы ng-init.
В приведенном ниже примере показано, как использовать директиву ng-init.
В этом примере мы собираемся создать переменную с именем «TutorialName», используя директиву ng-init, и отобразить значение этой переменной на странице.
<!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>
Объяснение кода:
- Директива ng-init добавлена к нашему тегу div, чтобы определить локальную переменную с именем «TutorialName», и значение, данное ей, — «AngularJS».
- Мы используем выражения в AngularJs для отображения вывода имени переменной «TutorialName», которое было определено в нашей директиве ng-init.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий вывод.
Вывод:
На выходе
- Результат ясно показывает вывод выражения, которое содержит строку «AngularJS». Это связано с тем, что строка «AngularJS» назначена переменной «TutorialName» в разделе ng-init.
3) нг-модель
И, наконец, у нас есть директива ng-model, которая используется для привязки значения элемента управления HTML к данным приложения. В приведенном ниже примере показано, как использовать директиву ng-model.
В этом примере
- Мы собираемся создать 2 переменные, называемые «количество» и «цена». Эти переменные будут привязаны к 2 элементам управления вводом текста.
- Затем мы собираемся отобразить общую сумму на основе умножения как ценовых, так и количественных значений.
<!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>
Объяснение кода:
- Директива ng-init добавлена в наш тег div для определения 2 локальных переменных; один называется «количество», а другой — «цена».
- Теперь мы используем директиву ng-model, чтобы связать текстовые поля «People» и «Registration price» с нашими локальными переменными «количество» и «цена» соответственно.
- Наконец, мы показываем Итог через выражение, которое является умножением количественных и ценовых переменных.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий вывод.
Вывод:
- Выходные данные четко показывают умножение значений для людей и цены регистрации.
Теперь, если вы перейдете к текстовым полям и измените значение цены «Люди и регистрация», итоговая сумма автоматически изменится.
- Приведенный выше вывод показывает только силу привязки данных в angularJs, которая достигается с помощью директивы ng-model.
4) нг-повтор
Это используется для повторения элемента HTML. В приведенном ниже примере показано, как использовать директиву ng-repeat.
В этом примере
- Мы собираемся иметь массив имен глав в переменной массива и
- затем используйте директиву ng-repeat, чтобы отобразить каждый элемент массива как элемент списка
<!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>
Объяснение кода:
- Директива ng-init добавлена к нашему тегу div, чтобы определить переменную под названием «главы», которая является переменной массива, содержащей 3 строки.
- Элемент ng-repeat используется путем объявления встроенной переменной с именем «names» и прохождения каждого элемента в массиве chapters.
- Наконец, мы показываем значение локальной встроенной переменной «names».
Если код выполнен успешно, при запуске кода в браузере будет показан следующий вывод.
Вывод:
- Приведенный выше вывод просто показывает, что директива ng-repeat принимает каждое значение в массиве, называемом «главы», и создает элементы списка HTML для каждого элемента в массиве.
Резюме
- Директивы используются для расширения функциональности HTML. Angular предоставляет встроенные директивы, такие как
- ng-app — используется для инициализации углового приложения.
- ng-init — используется для создания переменных приложения
- ng-model — используется для привязки элементов управления HTML к данным приложения
- ng-repeat — используется для повтора элементов с использованием угловых.