Что такое 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..! "
);
));

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..! "
);
));

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..! "
);
));

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

Свойство replace: true является обязательным и заменяет исходный комментарий директивой, в противном случае комментарий будет невидимым.

Заключение - Директивы AngularJS

Итак, Directive - очень мощная функция, доступная в AngularJS. Директива позволяет вводить новый синтаксис, похожи на маркеры и позволяет нам прикреплять к ним особое поведение. Существуют доступные директивы в AngularJS, которые очень полезны, также мы можем определить наши собственные пользовательские директивы и использовать их. Пользовательские директивы предоставляют разработчикам большую гибкость и свободу. Директивы добавляют новые функциональные возможности в существующий HTML с инновационным стилем и функциями.

Рекомендуемые статьи

Это руководство к Директивам AngularJS. Здесь мы обсудим три основные встроенные директивы, которые делят структуру AngularJS на три основные части. Вы также можете взглянуть на следующие статьи, чтобы узнать больше -

  1. Версии HTML
  2. Фреймворки на Java
  3. AngularJS Архитектура
  4. Стили списка HTML

Категория:

Разработка программного обеспечения