Учебники

11) Директива

Что такое директива 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.

Изучите директиву AngularJS: ng-app, ng-init, ng-model, ng-repeat, ng-transclude

<!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>

Объяснение кода:

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

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

Вывод:

Изучите директиву AngularJS: ng-app, ng-init, ng-model, ng-repeat, ng-transclude

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

2) нг-иници

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

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

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

Изучите директиву AngularJS: ng-app, ng-init, ng-model, ng-repeat, ng-transclude

<!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>

Объяснение кода:

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

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

Вывод:

Изучите директиву AngularJS: ng-app, ng-init, ng-model, ng-repeat, ng-transclude

На выходе

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

3) нг-модель

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

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

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

Изучите директиву AngularJS: ng-app, ng-init, ng-model, ng-repeat, ng-transclude

<!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>

Объяснение кода:

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

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

Вывод:

Изучите директиву AngularJS: ng-app, ng-init, ng-model, ng-repeat, ng-transclude

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

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

Изучите директиву AngularJS: ng-app, ng-init, ng-model, ng-repeat, ng-transclude

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

4) нг-повтор

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

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

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

Изучите директиву AngularJS: ng-app, ng-init, ng-model, ng-repeat, ng-transclude

<!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>

Объяснение кода:

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

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

Вывод:

Изучите директиву AngularJS: ng-app, ng-init, ng-model, ng-repeat, ng-transclude

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

Резюме

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