✅ Что такое Angular 2? - Модули в Angular 2

Что такое Angular 2?

Что такое Angular 2?

Для создания веб-приложений на HTML и JavaScript используется JavaScript-каркас, известный как Angular 2, который был создан Google. При работе с одностраничными приложениями препятствия, с которыми часто сталкиваются, можно преодолеть с помощью Angular 2.

Модули в Ангуляр 2

В приложении логические границы объединяются с помощью Angular 2. Функциональные возможности могут быть разделены на разные модули вместо того, чтобы объединять все в одном приложении. Ниже приведены некоторые части, из которых сделан модуль:

Чтобы получить доступ к функциям приложения, компоненты, которые необходимо загрузить, сообщаются Angular JS с помощью массива Bootstrap. Компонент должен быть объявлен в массиве начальной загрузки, чтобы в приложении Angular JS его можно было использовать в других компонентах.
Каналы, производные, компоненты и т. Д. Экспортируются через массив экспорта для использования в других модулях.
Из других модулей Angular JS функциональность может быть импортирована с помощью массива импорта.

Архитектура Angular 2

Анатомия приложения Angular 2 описана вышеупомянутой диаграммой. Функциональность приложения определяется каждым компонентом, который является логической границей. Функциональность между компонентами совместно используется с помощью многоуровневых сервисов.

Компонент определяется классом, шаблоном и метаданными. Свойства и методы состоят из класса. Функциональные возможности класса расширены и оформлены с помощью метаданных. HTML-представление приложения может быть определено с помощью шаблона.

Это приложение имеет один корневой модуль и несколько компонентов, которые разделяют функциональность.

Подобно модулю Root Angular, функциональный модуль имеет несколько компонентов, которые распространяют функциональность.

В приложении Angular JS логический фрагмент кода определяется компонентами.

Привязка и производные выполняются шаблоном, который содержит HTML-код приложения и отображает представление приложения.
Свойства и методы присутствуют в классе, который поддерживает представление приложения и определяется в TypeScript. Он имеет имя класса, имя свойства, тип свойства и значение.
С помощью декоратора определяются метаданные с дополнительными данными.

Angular 2 Особенности

Сила HTML расширяется с помощью пользовательского элемента HTML, известного как директива. Директивы в Angular 2 - это ngif и ngFor.

Элементы добавляются в код HTML с помощью элемента ngif в истинных сценариях, но не добавляются, если он оценивается как False. Представлена.

Основываясь на условии цикла for, используется элемент ngFor.

Привязка данных является одной из особенностей Angular 2. В свойстве класса свойство HTML-тега может быть привязкой.

В Angular 2 обработка ошибок является опцией для приложений. Библиотека ReactJS catch включена и используется функция catch. Ниже приведен код обработки ошибок.

Для функции обработчика ошибок ссылка содержится в функции catch. На консоль сообщение об ошибке отправляется функцией обработчика ошибок. Выполнение продолжается после возврата ошибки в основную программу. Это перенаправляет ошибку на консоль.

Пользователи перенаправляются на разные страницы с помощью маршрутизации после выбора опции на главной странице.

В этом данные могут быть преобразованы с помощью нескольких фильтров и каналов.

Для преобразования в нижний регистр.

Для преобразования в верхний регистр.

Из входной строки можно вырезать часть данных. Начальная позиция среза определяется начальным, а конечная позиция указывается конечным.

Входная строка может быть преобразована в формат даты с помощью функции даты.

В формат валюты входная строка преобразуется с помощью функции валюты.

В процентный формат входная строка преобразуется с помощью процентной функции.

Пользовательские трубы могут быть созданы с помощью Angular 2.

Имя канала определяется именем Pipename.
Пользовательский класс трубы определяется классом Pipe.
Для работы с трубой используется функция преобразования.
В трубу параметры передаются параметрами.
Тип возврата канала определяется типом возврата.

Жизненный цикл Angular 2

Приложение Angular 2 имеет жизненный цикл от его запуска до конца приложения.

Эта диаграмма изображает весь жизненный цикл Angular 2. Ниже приведено описание.

Изменение значения свойства с привязкой к данным описывается методом ngOnChanges.
После того, как Angular отобразит привязанные к данным свойства, во время инициализации компонента вызывается метод ngOnInit.
Когда сам Angular не может обнаружить изменения, для обнаружения используется ngDoCheck.
В представлении компонента, когда внешнее содержимое проецируется Angular, в ответ вызывается ngAfterContentInit.
Как только проецируемое содержимое проверяется Angular, в ответ вызывается ngAfterContentChecked.
Как только представления компонента и дочерние представления инициализируются Angular, вызывается ngAfterInit.
NgAfterViewChecked вызывается после проверки Angular компонентов и дочерних представлений.
До уничтожения директивы или компонента Angular, НПО уничтожают, что называется этапом очистки.

Службы - это еще одно свойство Angular 2, которое используется, когда различным модулям требуется общая функциональность. Среди различных модулей функциональность базы данных может быть повторно использована. Функциональность базы данных может использоваться созданной службой.

Зачем нам нужен Angular 2?

Angular 2 предоставляет функции, которые помогают в отладке и понимании кода, опыт разработки и редактирования также будет улучшен.
Кодирование становится более согласованным с помощью Angular 2.
Angular 2 предоставляет широкие возможности привязки. Свойство привязки свойств позволяет контролировать DOM. Реакция на любое событие с точки зрения может быть достигнуто с помощью привязки события.
Angular 2 предоставляет полнофункциональную возможность маршрутизации.
Angular 2 имеет обширную документацию и поддержку сообщества, которая обеспечивает решение практически всех возникающих проблем.

Вывод

Angular 2 - это одна из наиболее востребованных сред веб-разработки и та, которая необходима для создания следующего веб-приложения.

Что такое Angular 2? - Модули в Angular 2 - Особенности Angular 2