Category: Angular

18
Окт
2019

Бесконечная прокрутка в Angular с помощью CDK

От автора: при работе с большим количеством контента может оказаться полезным добавить на ваш сайт функцию бесконечной прокрутки. Когда я говорю «бесконечная прокрутка», я имею в виду страницу, добавляющую новый контент, пока пользователь продолжает прокручивать ее, создавая иллюзию бесконечной прокрутки страницы. Многие веб-сайты используют эту функцию, и она может быть гибкой альтернативой нумерации страниц. Несмотря […]

27
Сен
2019

Почему вам стоит выбрать Angular для своего следующего проекта frontend

От автора: первоначально я не был front-end разработчиком, я обычно много работаю с back-end API в C#, Go, Node или Python. Несколько лет назад, когда я перешел в новую компанию, меня перевели на full-stack. Мне было поручено создать внутреннее решение, которое бы поддерживало управление пользователями, возможность обмена мгновенными сообщениями, возможность делать заметки / делиться и […]

04
Сен
2019

Использование функции async-await в Angular

От автора: функции обратного вызова и promise являются строительными блоками для написания асинхронного кода в JavaScript. В приложении Angular мы можем использовать Rx.js, чтобы использовать возможности Observables, Subject, BehaviorSubject и т. д. для элегантного написания асинхронного кода. В последней версии ECMA JavaScript начал поддерживать функцию «async-await». Если вы начинали с C #, вам может быть […]

01
Авг
2019

Формы

Манипуляция формами (Angular forms) осуществляется мощными и продуманными инструментами библиотеки @angular/forms.

С точки зрения Angular различают формы:

Стандартные (Template-driven);
Реактивные (Reactive).
Данная глава посвящена рассмотрению стандартных форм, реактивные рассмотрены отдельно.

01
Авг
2019

Анимация. Часть 2

Angular анимации можно определить стили один раз и использовать их в нескольких компонентах при создании для них анимированных смен состояний (подобно переиспользованию компонентов, директив и др.).

Используя метод animation() опишите анимацию и экспортируйте ее.

31
Июл
2019

Анимация. Часть 1

Angular имеет свой собственный механизм реализации анимаций, в основе которого лежит стандарт Web Animations API.

В случае если стандарт не поддерживается браузером, анимирование будет реализована с использованием CSS фреймов (keyframes).

За Angular анимацию отвечает модуль BrowserAnimationsModule.

31
Июл
2019

Angular view

Для манипуляций с DOM-элементами в Angular используются так называемые абстракции, которые представлены классами ElementRef, TemplateRef, ViewRef, ComponentRef и ViewContainerRef.

Сами абстракции представляют шаблон компонента или его отдельные части.

Для получения доступа к абстракциям используется механизм DOM-запросов, реализованных декораторами @ViewChild() (возвращает одну ссылку) и @ViewChildren() (возвращает массив ссылок).

31
Июл
2019

Динамические компоненты

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

В Angular динамическая компиляция компонентов реализована через сервис ComponentFactoryResolver.

Для отображения такого компонента сперва необходимо определить место, где он будет располагаться. Местом служит ссылка на представление типа ViewContainerRef.

31
Июл
2019

Pipe

Angular pipe, или просто фильтр, нужен для преобразования данных прямо в HTML-шаблоне. Например, отображение даты и времени в желаемом формате или задание формата вывода числового значения....

31
Июл
2019

Создание директив

Довольно часто при разработке Angular приложения приходится создавать пользовательские директивы (Angular custom directive).

31
Июл
2019

Директивы

Angular директивы используются для изменения внешнего вида или поведения DOM-элемента. Выделяют три типа директив:

С собственным шаблоном, или по-другому компоненты (компоненты являются директивами);
Структурные, которые изменяют структуру DOM-дерева;
Атрибуты, которые изменяют внешний вид или поведение по умолчанию элемента DOM-дерева.

31
Июл
2019

Взаимодействие компонентов

Первые три случая были рассмотрены ранее в предыдущих главах. Тем не менее в этой главе приведены примеры всех способов взаимодействия.

Пример Angular компонента с @Input(), @Output() и @ViewChild() приведен ниже.

31
Июл
2019

Жизненный цикл компонента

Каждый компонент имеет свой жизненный цикл (Component Lifecycle), в процессе которого вызываются ряд описывающих текущий этап методов (Angular Hooks):

31
Июл
2019

Двустороннее связывание

Механизм двустороннего связывания (angular two way binding) используется, когда необходимо отобразить свойство в шаблоне (одностороннее связывание) и обновить его при изменении значения (возникновение события) без перезагрузки страницы.

Синтаксис двустороннего связывания представляет собой слияние [] одностороннего связывания и () привязки события.

31
Июл
2019

Обработка событий

Пользователь всегда взаимодействует с интерфейсом приложения: наводит курсор на элементы, кликает мышкой по элементам web-страницы, нажимает клавиши. Это в свою очередь инициирует возникновение соответствующих событий.

В Angular все события можно отследить и обработать, привязав к ним вызов метода класса.

31
Июл
2019

Шаблоны

Angular – клиентский фреймворк, поэтому основная его работа связана с представлением данных и обработкой шаблонов.

Логика и представление реализуются посредством компонентов, в которых экземпляр класса компонента (контроллер) взаимодействует с шаблоном (angular template) и задает поведение элемента.

31
Июл
2019

Angular Ivy

Ivy представляет собой новую версию компилятора и визуализатора Angular, благодаря которому компиляция осуществляется быстрее, а конечные файлы имеют меньший размер.

Разработка Angular Ivy началась задолго до его официального релиза, и начиная с версии 8.x.x он стал доступен в тестовом режиме. Полная поддержка ожидается в Angular 9, а пока настоятельно не рекомендуется использовать его в режиме production.

31
Июл
2019

Компиляция

Поскольку разработка ведется на TypeScript, то для запуска в браузере приложение должно быть предварительно обработано компилятором Angular, который конвертирует код исходных файлов в исполняемый JavaScript.

Механизм Angular compile реализован в двух режимах:

31
Июл
2019

Структура приложения

Разберем, что представляет собой архитектура Angular приложения.

Сам фреймворк состоит из нескольких библиотек (или модулей), каждая из которых содержит в себе определенный функционал, а каждый модуль состоит из совокупности классов и их свойств и методов.

31
Июл
2019

Компоненты

Компонент (Angular component) – обособленная часть функционала со своей логикой, HTML-шаблоном и CSS-стилями.

Класс становится Angular компонентом, если его объявлению предшествует декоратор @Component() с объектом конфигурации.

31
Июл
2019

Angular CLI

Angular CLI – это npm-модуль, реализующий интерфейс командной строки для создания, разработки и поддержки Angular приложений. В системе он должен быть установлен глобально.

31
Июл
2019

Установка и конфигурация

@angular/cli – это интерфейс командной строки для работы с Angular, его использование значительно облегчает процесс разработки. Например, одной командой можно сгенерировать полностью сконфигурированное работающее приложение или создать новую сущность (модуль, сервис, компонент и т.д.) в существующем приложении. Более подробно здесь.

07
Июн
2019

Angular (урок 3) – структура проекта

В этом видео мы разберем структуру проекта, рассмотрим предназначение файла package.json, научимся запускать приложение в VIsual Studio Code, ознакомимся с некоторыми наиболее важными командами Angular CLI.

06
Июн
2019

Введение в Angular

Первое обучающее видео из серии “Введение в Angular”. В этой серии уроков вы освоите основы и научитесь разрабатывать приложения на Angular.

04
Июн
2019

Мои любимые примеры решения задач и советы по Angular

От автора: Angular обладает множеством функций, как популярных, так и неизвестных. Самый простой способ найти оптимальные приемы для решения сложных задач с помощью Angular — это еще больше использовать Angular и учиться в процессе. Вот мои любимые примеры того, как можно использовать Angular, и советы по работе с ним. Angular — это JavaScript-фреймворк для создания […]