[HTML Academy] Онлайн‑курс Angular для опытных разработчиков
Курс разработан для опытных разработчиков, которые хотят повысить свой профессиональный уровень. Он подойдёт для работающих людей, у которых мало времени.
Курс разработан для опытных разработчиков, которые хотят повысить свой профессиональный уровень. Он подойдёт для работающих людей, у которых мало времени.
После завершения курса вы узнаете особенности и тонкости работы с фреймворком Angular, его отличия от других фреймворков, и научитесь работать с ним, даже если раньше никогда его не использовали.
Курс подойдет тем, кто уже умеет работать с JavaScript и ES6.
Программа курса
Раздел 1
Angular. Введение
В первом разделе мы рассмотрим краткую историю Angular, узнаем, что такое TypeScript, возможно ли обойтись без него, и познакомимся с интерфейсом командной строки, который позволит избавится от рутины при организации кода. После этого мы создадим приложения, вокруг которых будет строиться обучение.
- Фреймворки и библиотеки.
- Angular. История. Краткий гид по версиям.
- Обзор инструментов CLI.
- Создание Hello World приложения.
- Запуск приложения.
- Обзор структуры проекта.
- Навигация по проекту с помощью IDE.
- Введение в TypeScript.
- Что такое TS. Какие решает задачи.
- TS и Angular. Есть ли жизнь без TS.
- TS. Типы данных, модификаторы доступа.
- Классы, интерфейсы, енумы.
- Дженерики.
- Усложняем приложение (демонстрация TS в действии).
Компоненты и модули
Изучим основные строительные блоки для организации визуальной составляющей приложения, что происходит в компоненте за время его жизни, и как компоненты могут «общаться» между собой. Узнаем, как разделить приложения на модули. После разобьём наше приложение на модули и компоненты.
- Компоненты в Angular.
- Создание компонентов. Передача параметров в компоненты и наружу. Прокидывание контента.
- Жизненный цикл компонента.
- События.
- Компоненты и HTML.
- Стилизация содержимого компонентов и host-контейнера.
- Датабиндинг.
- Умные и глупые компоненты.
- Модули в Angular.
Директивы, пайпы
Поймём, как можно стилизовать элементы разметки из шаблона, менять разметку директивами и форматировать отображаемые значения пайпами. Узнаем, как они работают, и создадим свои. После добавим в компоненты наших приложений немного условностей для отображения.
- Введение в директивы.
- Встроенные директивы (ngIf, ngFor, ngStyle, ngClass).
- Как устроены структурные директивы.
- Создание директив.
- События.
- Передача параметров.
- Доступ к свойствам и событиям контейнера, управление контейнером и его стилизация.
- Что такое pipe.
- Встроенные pipe.
- Создание собственных pipe.
Работа с формами
Узнаем разные подходы в создании форм, и какого подхода придерживаются при построении крупных приложений. Научимся валидировать, обрабатывать и синхронизировать вводимые пользователем данные. Добавим больше интерактивного взаимодействия пользователя с нашим приложением.
- Создание форм в Angular.
- Template Driven Forms.
- Reactive forms.
- Валидация форм.
- Синхронно и асинхронно.
- Собственные валидаторы.
- Связанные поля в форме.
- FormBuilder.
- ngModel.
Сервисы, DI, Состояние приложения и RxJS
Изучим паттерн DI, узнаем, что такое дерево инжекторов, и зачем оно нужно. Создадим свои сервисы и поймём, почему логику лучше хранить не в компоненте. Познакомимся с библиотекой RxJS и организуем сервисы для хранения состояний.
- Концепция сервисов.
- Паттерн DI.
- Создание сервисов и их жизненные циклы.
- Дерево инжекторов.
- Сервисы для организации логики компонентов и передачи данных между ними.
- Поведенческий паттерн Observer.
- Обзор библиотеки RxJs.
- Subjects.
- RxJS операторы.
- Сервисы для хранения состояния.
Работа с сетью
Изучим REST, научимся организовывать код для взаимодействия с сервером, применим паттерн адаптер в контексте наших приложений и используем перехватчики при взаимодействии с бэкендом. После совместим полученные данные с состоянием нашего приложения.
- REST. Взаимодействие с сервером.
- Интерсепторы.
- Сервис для логирования.
- Организация сервисов для взаимодействия с сервером.
- Паттерн адаптер.
- Сервисы адаптеры.
Маршрутизация и аутентификация
Узнаем, как организовать маршрутизацию в Angular, как перехватывать пользователя при переходе на другие страницы и как ограничивать доступ пользователя на страницы. Научимся создавать параллельные маршруты и поймём, зачем это может быть нужно.
- Маршрутизация в приложении.
- Добавление маршрутизации в проект.
- Статичные маршруты.
- Динамические маршруты. Обработка параметров.
- Перенаправления.
- Приватные маршруты.
- Организация параллельных роутов.
- Аутентификация в приложении.
Тестирование и отладка Angular-приложений
Познакомимся с методологиями тестирования и инструментами, которые помогут нам протестировать приложение. Осознаем важность тестирования и почему им нельзя пренебрегать. Затем напишем первые тесты на Jasmine и Protractor и воспользуемся утилитой для того, чтобы посмотреть насколько наше приложение покрыто тестами.
- Введение в тестирование. Виды тестов.
- Обзор фреймворков для тестирования.
- Тестирование компонент.
- Тестирование директив.
- Тестирование пайп.
- Тестирование сервисов.
- E2E тестирование на Protractor.
Оптимизация и архитектура
Узнаем, как оптимизировать работу и загрузку приложения. Что делать, чтобы не утекала память. И как лучше всего строить приложение, на что обращать внимание, и какова цена пренебрежения к архитектуре. После этого организуем приоритетность загружаемых модулей, оптимизируем обновление компонентов и избавимся от утечек памяти.
- Профилирование приложения.
- Управление обновлением компонентов.
- Важность разбиения приложения на модули и ленивая загрузка.
- Стратегии загрузки приложения.
- Однонаправленный поток данных и иммутабельность.
- Перерисовка списков.
- ngOnDestroy и отписка.
- Что же дальше?
Нужен организатор, который сможет выдать курс в HTML-виде.
Конкретно в каком виде нужен материал смотрите здесь:
https://htmlacademy.ru/intensive/for-middle/angular