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

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

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

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

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

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

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

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

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

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

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

Пример np-приложения

В примере ниже показано, как использовать директиву 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>

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

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

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

Вывод:

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

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

ng-init в AngularJS

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

Пример 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>

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

  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-model.

Пример 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>

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

  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>

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

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

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

Вывод:

ng-повтор в AngularJS

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

Резюме

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

Вы могли бы: