Введение в Angular 0:00 Angular - это инкрементальный дом, в отличие от виртуального дома. В Angular нет промежуточного звена, операции модифицируют ноты напрямую. Используются зон джес и механизм детекшн для отслеживания синхронных взаимодействий.
Производительность и компиляция 1:22 В Angular есть движки Ivy и Jet для повышения производительности. Виды компиляции: тайм-компиляция и джип-компиляция. По умолчанию используется джип-компиляция, но можно включить тайм-компиляцию для буста производительности.
Модули и компоненты 2:21 Корневая часть Angular - модуль, в котором подключаются зависимости и компоненты. Модуль может подключать другие модули, включая модуль роутинга. Компонент содержит логику работы с данными и стилями.
Сервисы и пайпы 4:22 Сервисы работают с бизнес-логикой и ресурсами. Пайпы трансформируют значения, например, преобразуют наименование продукта.
Директивы 5:16 Директивы изменяют логику поведения компонентов и тегов. Атрибутивные директивы работают с конкретными компонентами или тегами. Структурные директивы изменяют структуру ресурса, на котором расположен компонент.
Гварды и интерцепторы 7:09 Гварды защищают роутинг, ограничивая доступ к страницам. Интерцепторы позволяют модифицировать запросы до и после их выполнения.
Генерация кода 9:44 Для генерации кода используется инструмент ng generate. Можно сгенерировать модуль, сервис или новое приложение. Пример генерации кода показан в видео.
Структура проекта 10:44 Основные файлы: тест-конфигурация, karma.json, angular.json. Корневая часть: main.ts, где запускается платформа. Внедрение зависимостей: компонент работает с платежкой, внедряется зависимость.
Внедрение зависимостей 11:39 Пример с платежкой PayPal: внедрение зависимости для избежания переписывания кода. Механизм внедрения зависимостей: DI Container, Inversion of Control. Возможность подмены зависимостей в модулях.
Структура приложения 12:34 Основные части: модуль, компонент, spec-файл, тесты, css, html, роутинг. Декораторы в модулях: декларс, импорты, провайдеры. Экспорт компонентов и модулей наружу.
Компоненты и стили 14:28 Компоненты: селектор, темплейт, стили. Внедрение зависимостей в конструкторе компонента. Стили и структура представления.
Сервисы 16:27 Сервисы: класс с декоратором Inject. Провайдеры: провайдер-эни, провайдер-рут, провайдер-платформы. Создание уникальных сервисов при каждом запросе.
Роутинг 17:24 Роутер-модуль: импорт, роуты, гварды. Ленивая подгрузка модулей. Гварды: проверка условий для перехода на страницу.
Гварды 19:19 Гварды: true или false, внедрение зависимостей. Пример работы гвардов: редирект при false, переход при true. Проверка условий для корректного роутинга.
Работа с роутингом 20:51 Переход на тус и его вложенность. Подгрузка модуля и настройка роутов. Корневая часть компонента и динамические параметры.
Компоненты и модули 21:46 Различие между корневыми и не корневыми компонентами. Модули для работы с ашпи и роботом. Вьюжные компоненты и директивы.
Работа с провайдерами 22:46 Передача провайдеров и сервисов. Параметры: юс класс, юс экзистинг, юз. Внедрение зависимостей и работа с сервисами.
Цепочка внедрения зависимостей 23:45 Внедрение зависимостей через факторе. Вычисление и возврат сервисов. Пример работы с интерцепторами и мульти-параметром.
Работа с извел 25:44 Передача значений в юз. Проблемы с передачей строк и значений. Пересечение и уникальность строковых значений в приложении.
Инжекшен токен 26:05 Инжекшен токен создает уникальную подпись для компонента. Использование строки вместо токена некорректно. Инжекшен токен позволяет корректно инжектировать зависимости.
Компоненты и жизненный цикл 27:05 Компоненты реализуют интерфейс с методами жизненного цикла. Методы жизненного цикла включают OnInit, Check, и Active. Детекшн отслеживает асинхронные взаимодействия и запускает перерисовку.
Работа с HTTP клиентом 28:03 В Angular используется HTTP клиент для работы с запросами. Модуль HTTP клиента нужно импортировать, а не внедрять. Запросы выполняются через сабскрайп.
Сигналы и обзерверы 29:00 Сигналы позволяют работать с обзерверами и обзервер объектами. Обзерверы наблюдают за объектами и получают значения. Сигналы и обзерверы работают вместе, но можно использовать и по отдельности.
Внедрение зависимостей 29:52 Внедрение сервисов и токена через декоратор Inject. В новых версиях Angular можно использовать другие записи для инжекции. Важно понимать, как правильно использовать инжекцию.
Сервисы и их использование 30:49 Root сервис создается один раз для всего приложения. Entity сервис создается для каждой части приложения. Внедрение сервисов происходит в зависимости от их типа.
Интерцепторы 32:47 Интерцепторы перехватывают события до и после запроса. В интерцепторах можно добавлять токены авторизации и получать ответы. Интерцепторы работают с обзервер объектами.
Работа с директивами 34:17 Директивы обрабатывают события и передают переменные. Атрибутивные директивы передаются через атрибуты, структурные директивы через звездочку. Структурные директивы изменяют структуру компонента и создают темплейты.
Контейнер и структурные директивы 36:51 Контейнер используется для наложения двух структурных директив на атрибут. На один тег нельзя навесить две структурные директивы. Для этого используется контейнер и структурные директивы.
Передача контента в компонент 37:49 Контент передается в компонент через селектор. Компонент должен иметь обязательные параметры: тайтл и юзер айди. Для получения параметров из родительского компонента используется декоратор импут.
Двусторонняя привязка данных 38:49 В Angular и Vue возможна двусторонняя привязка данных. В отличие от React, где привязка односторонняя. Пример вывода данных с использованием скобочек.
Передача значений между компонентами 39:48 Для передачи значений из дочернего компонента в родительский используется аутпут. Пример с кликом и передачей значения через эвент. В родительском компоненте эвент обрабатывается и выводится значение.
Работа с элементами и контентом 41:44 В Angular работа с элементами осуществляется через контент. Для получения элемента по названию используется контент чалд. Для работы с вложенными элементами используется вью чайлд.
Декораторы для работы с контентом 43:36 Для работы с несколькими элементами используется контент кварли. Пример передачи нескольких текстов и их обработки. Декораторы вью чайлд и контент чалд помогают управлять вложенными элементами.
Введение в пайпы 44:40 Пайпы позволяют модифицировать значения. Пример с трансформом пайпа: добавление 1000 к значению. Аргументы передаются через двойные двоеточия.
Работа с объектами и ссылками 45:36 Объекты имеют ссылки и значения. Изменение ссылки и значения может привести к рассинхрону. Пример изменения объекта без изменения ссылки.
Имп и пьюр пайпы 46:31 Имп пайпы изменяют значение, а не ссылку. Пьюр пайпы отслеживают изменения по значению. Пьюр пайпы могут нагружать систему при частых изменениях.
Атрибутивные и структурные директивы 49:16 Атрибутивные директивы изменяют компонент. Структурные директивы изменяют структуру компонента. Пример создания атрибутивной директивы с селектором и классом.
Хозбадинг и хостлисанер 50:15 Хозбадинг изменяет стиль компонента при навешивании директивы. Хостлисанер отслеживает события, например, клик. Пример отслеживания клика и изменения цвета.
Структурные директивы 52:14 Структурные директивы работают со структурой компонента. Необходимы зависимости для работы со структурой. Пример создания структурного компонента и обработки событий.
Заключение 54:29 Обзор некоторых моментов Angular 17. Рекомендация перейти на телеграм-канал для более подробной информации.
Работа с темплейтами 54:45 Введение в работу с темплейтами в зависимости от условий. Пример изменения темплейта при изменении значения аккаунта. Использование структурных директив для переключения темплейтов.
Жизненный цикл компонента 56:40 Проверка состояния компонента: чек, контент-чек, вьючек. Отключение зон джесса для оптимизации производительности. Синхронная перерисовка при изменении числовых значений.
Изменение детекшн 58:34 Использование ченч детекшн для обновления компонентов. Проблемы с перерисовкой при частых обновлениях. Различие между умными и глупыми компонентами.
Работа с формами и импутами 59:33 Введение в форм с модуль и его использование. Двустороннее связывание значений и событий. Обработка событий и изменение значений в компоненте.
Использование стора 1:03:25 Введение в стор для передачи данных между компонентами. Пример использования экшенов и редюсеров. Работа с эффектами для асинхронного взаимодействия.
SSR и клиентский рендеринг 1:05:34 SSR Server-Side Rendering рендерит страницу на сервере. Клиентский рендеринг рендерит страницу на клиенте. В Angular 17 SSR и клиентский рендеринг работают корректно.
Изменения в Angular 17 1:06:32 Новое написание интерфейсов IFS через декораторы. Введение отложенной загрузки составных частей с помощью defer. Улучшение взаимодействия с билдингом и производительности.
Сигналы и инжектирование 1:07:32 Введение сигналов для упрощения работы с эффектами. Возможность инжектирования составных частей. Появление standalone компонентов, упрощающих взаимодействие.
Декораторы и сервисы 1:08:30 Декораторы host, self, skipSelf для управления сервисами. Выбор сервиса в зависимости от его расположения. Подробное объяснение в телеграм-канале автора.
Заключение 1:09:29 Обзор основных изменений в Angular 17. Призыв подписаться на телеграм-канал для дополнительной информации. Завершение видео с просьбой поставить лайк и подписаться.
