AngularJS Директиви - Вивчіть 3 основні вбудовані директиви AngularJS

• Що таке AngularJS?
• 

var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));

• app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));

• app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));

Що таке AngularJS?

AngularJS - це одна з найпопулярніших веб-рамок на основі JavaScript, що використовується в розробці на передньому кінці. Він використовується при розробці програм для одних сторінок (SPA). AngularJS - це система з відкритим кодом, яка в основному підтримується Google і громадою осіб, які беруть участь у вирішенні проблем, що виникають при розробці додатків на одній сторінці. У цій темі ми дізнаємось про директиви AngularJS.

AngularJS - це не що інше, як розширення існуючого HTML; Він додається на HTML-сторінці з тегом. AngularJS робить HTML-сайт більш чутливим до дій користувачів, легко додаючи додаткові атрибути. Остання стабільна версія AngularJS наразі 1.6.x.

Директиви AngularJS

AngularJS - це ефективна основа, яка підтримує архітектуру на основі Model-View-Controller (MVC). Він надає основні функції, такі як двостороння прив'язка даних, контролер, послуги, директиви, шаблони, маршрутизатор, фільтри, введення залежностей тощо. Це все основні особливості, які працюють спільно, щоб зробити AngularJS ефективними.

Директива є однією з дуже корисних особливостей у AngularJS. Він розширює існуючий HTML і дозволяє легко розробляти веб-сторінки з новою поведінкою за допомогою основного JavaScript. Це дозволяє записувати власні власні теги та відображати їх у існуючий HTML. Цей функціонал дає більше свободи та дозволяє розробникам велику гнучкість у створенні та використанні відповідних елементів у веб-додатках відповідно. Також вони можуть розробляти власні директиви. У цій статті ми зосередимось головним чином на директивах AngularJS та спробуємо отримати знання про цю основну особливість.

Директиви - це не що інше, як маркери елементів DOM в HTML, такі як ім’я атрибута, ім'я елемента, клас CSS або коментар. Потім компілятор AngularJS приєднує вказану поведінку до цього елемента. Кожна директива має назву і починається з 'ng-'. Кожна директива може визначати, де її можна використовувати в елементах DOM. Є деякі існуючі директиви, які вже доступні в AngularJS, і ми також можемо визначити самостійно.

Ми розглянемо три основні вбудовані директиви, які ділять рамку AngularJS на три основні частини.

1. ng-app: Ця директива повідомляє компілятору, що це програма AngularJS. Директива, де вона визначена в DOM, стає кореневим елементом програми. Напр











AngularJS доступний як файл JavaScript і додається в HTML за допомогою тегу. Ng-додаток у елементі повідомляє AngularJS, що div є кореневим елементом та власником програми AngularJS. Програма AngularJS починається з цього елемента, і все, що є кодом AngularJS, пишеться всередині нього.

2. ng-model: Ця директива пов'язує значення з веб-сторінки, здебільшого з поля введення до змінної програми. В основному ця директива дозволяє надсилати дані з вхідних даних до програми AngularJS, які можна використовувати деінде. Напр




Введіть:

Директива ng-моделі прив'язує вхідне значення до змінної програми, що називається "input". Потім ми побачимо, як ми можемо відобразити те саме значення на веб-сторінці у наступному прикладі.

3. ng-bind: Ця директива пов'язує значення з програми AngularJS на веб-сторінці. тобто дозволяє пересилати дані з програми в теги HTML. Напр




Введіть:

Дані, які ми зафіксували за допомогою директиви “ng-model” у змінній програми “input”, пов'язані з елементом тегу

за допомогою "ng-bind". Ми можемо запустити цю програму зараз і побачити, як динамічно AngularJS оновлює введене значення на сторінці.

Поряд з цим, у AngularJS є ще деякі директиви, які є важливими.

4. ng-repeat: Ця директива повторює HTML-елемент і використовується для масиву об'єктів. Ця директива дуже корисна в таких сценаріях, як показ елементів таблиці на веб-сторінці.

5. ng-init: Ця директива використовується для ініціалізації значень програми AngularJS перед завантаженням веб-сторінки.

Створення нових директив

ми можемо створити власні власні директиви разом з існуючими доступними директивами AngularJS. Створити нові директиви дуже просто, використовуючи лише JavaScript. Нові директиви створюються за допомогою „. директива ”. Напр



var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));




var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));




var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));


Angular.module - це функція AngularJS, яка створює модуль. Ми створили власну директиву з назвою користувальницька директива, для якої записана функція. Щоразу, коли ми використовуємо цю директиву на своїй веб-сторінці, ця функція буде виконуватися. У цьому випадку це шаблон, що повертається, що містить HTML-код.

У той час як директива про іменування нам потрібно використовувати конвенцію про іменування випадку верблюда, і, застосовуючи її, ми повинні використовувати розділену конвенцію про іменування "-".

Є чотири способи, за допомогою яких ми можемо використовувати директиви,

Назва елемента

Як використано в останньому прикладі:

Атрибут

Клас

Для виклику директиви за допомогою імені класу ми повинні додати обмеження властивості зі значенням "C", визначаючи його.

app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));


app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));


app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));


Прокоментуйте

Для виклику директиви за допомогою коментаря ми повинні додати властивість обмеження зі значенням "M", визначаючи її.

app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));

Властивість заміни: true є обов'язковою і замінить оригінальний коментар директивою, інакше коментар буде невидимим.

Висновок - Директиви AngularJS

Отже, Директива - це дуже потужна функція, доступна в AngularJS. Директива дозволяє вводити нові синтаксиси, схожі на маркери та дозволяє нам прив’язувати до них особливу поведінку. У AngularJS існують наявні директиви, які дуже корисні, також ми можемо визначити власні власні директиви та використовувати їх. Спеціальні директиви дозволяють розробникам велику гнучкість та свободу. Директиви додають нову функціональність у існуючий HTML за допомогою інноваційного стилю та функцій.

Рекомендовані статті

Це посібник щодо директив AngularJS. Тут ми обговорюємо три основні вбудовані директиви, які ділять рамку AngularJS на три основні частини. Ви також можете переглянути наступні статті, щоб дізнатися більше -

1. Версії Html
2. Рамки в Java
3. AngularJS Архітектура
4. Стилі списку HTML