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

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

Що таке Директива в AngularJS?

A Directive в 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-app в AngularJS

Це використовується для ініціалізації програми Angular.JS. Коли ця директива розміщена на сторінці HTML, вона в основному повідомляє Angular, що ця сторінка HTML є додатком angular.js.

Приклад np-app

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

ng-app в 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. У нашому випадку ми використовуємо вирази для простого об’єднання 2 рядків.

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.

вихід:

ng-app в 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-моделі

У цьому прикладі

  • Ми збираємося створити 2 змінні під назвою «кількість» і «ціна». Ці змінні будуть прив’язані до 2 елементів керування введенням тексту.
  • Потім ми відобразимо загальну суму на основі множення значень ціни та кількості.

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 локальних змінних; один називається «кількість», а інший — «ціна».
  2. Тепер ми використовуємо директиву ng-model, щоб прив’язати текстові поля «People» і «Registration price» до наших локальних змінних «quantity» і «price» відповідно.
  3. Нарешті, ми показуємо загальну суму за допомогою виразу, який є множенням змінних кількості та ціни.

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.

вихід:

ng-модель в AngularJS

  • Вихідні дані чітко показують множення значень для людей і ціни реєстрації.

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

ng-модель в AngularJS

  • Наведений вище вихід просто показує потужність зв’язування даних у angularJs, яка досягається за допомогою директива ng-model.

ng-repeat в AngularJS

Це використовується для повторення елемента HTML. Наведений нижче приклад показує, як використовувати директива ng-repeat.

Приклад ng-repeat

У цьому прикладі

  • Ми матимемо масив назв розділів у змінній масиву and
  • потім використовуйте директиву ng-repeat, щоб відобразити кожен елемент масиву як елемент списку

ng-repeat в 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-repeat в AngularJS

  • Наведений вище вихід просто показує, що директива ng-repeat взяла кожне значення в масиві під назвою «chapters» і створила елементи списку HTML для кожного елемента в масиві.

Підсумки

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

Вам може сподобатися: