Что такое 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-app at сообщает AngularJS, что div является корневым элементом и владельцем приложения AngularJS. Приложение AngularJS запускается с этого элемента, и что бы ни было кодом AngularJS, оно написано внутри него.
2. ng-model: эта директива связывает значение с веб-страницы, в основном из поля ввода, с переменной приложения. По сути, эта директива позволяет отправлять данные из ввода в приложение AngularJS, которое можно использовать где-то еще. Например
Войти:
Директива ng-model связывает входное значение с прикладной переменной с именем «input». Затем мы увидим, как мы можем отобразить то же значение на веб-странице в следующем примере.
3. ng-bind: эта директива привязывает значение из приложения AngularJS к веб-странице. т.е. позволяет пересылать данные из приложения в теги HTML. Например
Войти:
Данные, которые мы собрали с помощью директивы «ng-model» в прикладной переменной «input», связаны с элементом tag
используя «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..! "
);
));
var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));
Angular.module - это функция AngularJS, которая создает модуль. Мы создали пользовательскую директиву с именем custom, для которой написана функция. Всякий раз, когда мы используем эту директиву на нашей веб-странице, эта функция будет выполняться. В данном случае это возвращаемый шаблон, содержащий HTML-код.
В то время как директива именования, мы должны использовать соглашение об именах в случае верблюда, и, вызывая его, мы должны использовать «-» соглашение об именах.
Есть четыре способа, которыми мы можем вызывать директивы,
Имя элемента
Как используется в последнем примере:
атрибут
Учебный класс
Чтобы вызвать директиву, используя имя класса, мы должны добавить свойство restrict со значением '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..! "
);
));
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));
app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));
Комментарий
Чтобы вызвать директиву с помощью комментария, мы должны добавить свойство restrict со значением '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..! "
);
));
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));
app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));
Свойство replace: true является обязательным и заменяет исходный комментарий директивой, в противном случае комментарий будет невидимым.
Заключение - Директивы AngularJS
Итак, Directive - очень мощная функция, доступная в AngularJS. Директива позволяет вводить новый синтаксис, похожи на маркеры и позволяет нам прикреплять к ним особое поведение. Существуют доступные директивы в AngularJS, которые очень полезны, также мы можем определить наши собственные пользовательские директивы и использовать их. Пользовательские директивы предоставляют разработчикам большую гибкость и свободу. Директивы добавляют новые функциональные возможности в существующий HTML с инновационным стилем и функциями.
Рекомендуемые статьи
Это руководство к Директивам AngularJS. Здесь мы обсудим три основные встроенные директивы, которые делят структуру AngularJS на три основные части. Вы также можете взглянуть на следующие статьи, чтобы узнать больше -
- Версии HTML
- Фреймворки на Java
- AngularJS Архитектура
- Стили списка HTML