Що таке директива AngularJS?
Директива в AngularJS - це команда, яка надає HTML нову функціональність. Коли angular проходить через HTML-код, він спочатку знаходить директиви на сторінці, а потім аналізує HTML-сторінку відповідно.
Простим прикладом директиви AngularJS, який ми бачили в попередніх розділах, є "директива ng-модель". Ця директива використовується для прив'язки нашої моделі даних до нашого погляду.
Примітка: Ви можете мати базовий кутовий код на HTML-сторінці за допомогою директив ng-init, ng-repeat та ng-model без необхідності мати контролери. Логіка цих директив полягає у файлі Angular.js, який надає Google. Контролери - це конструкції кутового програмування наступного рівня, які дозволяють ділову логіку, але, як згадувалося, для програми, яка є кутовою програмою, не обов’язково мати контролер.
У цьому підручнику ви дізнаєтесь-
- Як створити директиву
- ng-app
- нг-ініт
- ng-модель
- нг-повторити
Як створити директиву
Як ми визначили у вступі, директиви 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. У нашому випадку ми використовуємо вирази, щоб просто об’єднати 2 рядки.
Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.
Вихід:
Вихідні дані чітко показують вихідний вираз, який став можливим лише тому, що ми визначили додаток як додаток angularjs.
2) нг-ініт
Це використовується для ініціалізації даних програми. Іноді вам можуть знадобитися деякі локальні дані для вашої програми, це можна зробити за допомогою директиви 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-модель
І нарешті, ми маємо директиву ng-model, яка використовується для прив’язки значення елемента керування HTML до даних програми. У наведеному нижче прикладі показано, як використовувати директиву ng-model.
У цьому прикладі
- Ми збираємось створити 2 змінні, які називаються "кількість" і "ціна". Ці змінні будуть прив'язані до 2 елементів керування введенням тексту.
- Потім ми збираємося відобразити загальну суму на основі множення як цін, так і кількості.
Event Registration Guru99 Global Event
People : Registration Price : Total : {{quantity * price}}
Пояснення коду:
- Директива ng-init додана до нашого тегу div для визначення 2 локальних змінних; один називається "кількість", а інший - "ціна".
- Зараз ми використовуємо директиву ng-model для прив'язки текстових полів "Люди" та "Реєстраційна ціна" до наших локальних змінних "кількість" та "ціна" відповідно.
- Нарешті, ми показуємо Сумарний за допомогою виразу, який є множенням змінних кількості та ціни.
Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.
Вихід:
- Результат чітко показує множення значень для людей та ціни на реєстрацію.
Тепер, якщо ви перейдете до текстових полів і зміните значення Люди та Реєстрація, загальна сума автоматично зміниться.
- Наведений вище результат просто показує потужність прив'язки даних у angularJs, що досягається за допомогою директиви ng-model.
4) нг-повтор
Це використовується для повторення елемента HTML. У наведеному нижче прикладі показано, як використовувати директиву ng-repeat.
У цьому прикладі
- У нас буде масив назв розділів у масиві змінної та
- потім використовуйте директиву ng-repeat, щоб відобразити кожен елемент масиву як елемент списку
Event Registration Guru99 Global Event
- {{names}}
Пояснення коду:
- Директива ng-init додається до нашого тегу div для визначення змінної, що називається "глави", яка є змінною масиву, що містить 3 рядки.
- Елемент ng-repeat використовується шляхом оголошення вбудованої змінної, що називається "імена", та перегляду кожного елемента в масиві глав.
- Нарешті, ми показуємо значення локальної вбудованої змінної 'names'.
Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.
Вихід:
- Наведений вище результат просто показує, що директива ng-repeat взяла кожне значення в масиві, що називається "глави", і створила елементи списку HTML для кожного елемента в масиві.
Резюме
- Директиви використовуються для розширення функціональних можливостей HTML. Angular забезпечує вбудовані директиви, такі як
- ng-app - Використовується для ініціалізації кутового додатка.
- ng-init - Це використовується для створення змінних програми
- ng-модель - використовується для прив'язки елементів керування HTML до даних програми
- ng-repeat - Використовується для повторення елементів із використанням кутових.