Курс по Angular.JS

Этот онлайн-курс посвящён профессиональной разработке веб-приложений с помощью AngularJS.

Программа

Курс даст возможность быстро начать создавать свои приложения с использованием одного из самых популярных на сегодняшний день фреймворков – AngularJS. В процессе прохождения курса шаг за шагом вы сделаете реальное приложение, и хорошо разберетесь в специфике AngularJS.

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

Мы будем использовать современные практики разработки на AngularJS, а не те, которые, хоть и широко представлены в интернете, но давно устарели.

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

Курс можно условно разделить на три части.

  1. Основные элементы фреймворка.
  2. Архитектура приложений, организация проекта.
  3. Взгляд во внутрь фреймворка и подробный разбор деталей.

Мы используем Angular ветки 1.6.X, поскольку именно на нём сейчас делаются новые проекты.

Детали программы смотрите далее.

Набор в группы

Количество участников в группе ограничено.

Вы также можете подписаться на уведомления по набору новых групп по этой программе:

На ваш email придёт письмо с информацией о дате и деталях программы.

Основные темы программы

  • Первая часть курса
  • Вторая часть курса
  • Третья часть курса

Первая часть курса

  1. Быстрый старт с AngularJS
    • Приложение за 5 минут.
    • Директивы "из коробки" и шаблонизация в AngularJS.
    • Магия двустороннего связывания (цикл дайджеста).
    • Детали конструктора директив.
    • Создание своих директив.
    • Вложенные директивы, передача параметров.
  2. Компонентный подход
    • Переход от директив к компонентам
    • Метод .component
    • Использование контроллера компонента
    • Жизненный цикл компонента
    • Рекомендуемая EcmaScript2015 структура
  3. Сервисы
    • Организация service provider'ов и зависимостей.
    • Встроенные сервисы AngularJS.
    • Написание своих сервисов, отличия между реализациями провайдера.
    • Понимание асинхронных операций и сервис промисов $q
    • Работа с API c помощью $http, $resource и Restangular.
    • Ресурсы данных. Использование Firebase.
  4. Редактирование данных, модель и формы в AngularJS
    • Модель, директива ng-model.
    • Удобная валидация форм.
    • Переопределение и расширение валидаторов.
    • Подлючение контроллера директивы и использование ngModelController
    • $formatters и $parsers
    • Автоматичский показ ошибок, ng-message.
  5. Навигация и маршрутизация
    • Библиотеки для организации маршрутизации.
    • Роутер ui-router(1.0.0-beta.3). Компонентный подход организации состояний.
    • Вспомогательные директивы ui-router.
    • Управление состояниями: $state и $stateProvider.
    • Вложенные и абстрактные стейты.
    • Предзагрузка данных по средством resolve.
    • События и триггеры ui-router.

По окончанию первой части курса вы понимаете, как разработать на AngularJS несложное приложение для вывода и редактирования данных.

Вторая часть курса

  1. Авторизация в приложении
    • Интерфейс для авторизации на AngularJS
    • Интерцептор для проверки прав.
    • Роль роутера в ограничении прав доступа
    • Варианты организации ACL с помощью ui-router
  2. Организация приложения на диске
    • Файловая структура.
    • Модульный и компонентный и модульно-компонентный подходы.
    • Angular и модульность EcmaScript2015
    • Angular и TypeScript
    • WebPack для сборки.
  3. Автоматизированные тесты.
    • Unit-тесты и TDD (вместе с jasmine и karma).
    • Специфика тестирования сервисов, директив и компонентов.
    • Собираем тесты с помощью webpack
    • Проверяем покрытие кода тестами
    • Функциональные(e2e) тесты с использованием protractor.

Третья часть курса

  1. проверка курсовых проектов
  2. отладка приложения
    • разбор сущностей AngularJS в консоли
    • обзор вспомогательных инструментов
    • погружение в исходный код фреймворка
  3. Еще раз о директивах и компонентах
    • Использование сервиса $compile.
    • вложенные директивы с transclude.
    • работа хуков для компонента ($onInit, $onChanges, $onDestroy, $postLink)
  4. Интеграция со сторонними модулями
    • Сторонние плагины, не знающие про AngularJS
    • $scope.watch
    • $scope.apply
    • События, ng-events на $scope
    • Переопределение и расширение сторонних сервисов. Использование декораторов
  5. Возможные проблемы и их решение
    • $watch и проблемы производительности
    • Серверный рендеринг, поисковики
    • Подгрузка модулей на лету
    • AngularJS и Drag'n'Drop
  6. Краткая информация про Angular 2.0
    • Подготовка структуры проекта к Angular 2.0

Как проходит обучение?

Курс будет проходить по схеме 6 + 2, т.е. 6 занятий, затем недельный перерыв и ещё 2 занятия. Так оптимально, чтобы все участники имели время подумать над предложенными подходами и что-то написать с их использованием. Первая встреча традиционно является собранием.

На каждом занятии мы изучаем что-то новое. После встречи даётся домашнее задание.

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

На следующем занятии мы смотрим, что и как получилось его решить и как сделать лучше. Чтобы получить от курса максимум результата, нужно не только слушать, но и делать что-то дома, а затем – показывать преподавателю. Только так, постепенно, с обратной связью от преподавателя, создавая проект на Angular, вы действительно разберётесь, что и как.

На этом курсе мы изучаем последнюю стабильную версию AngularJS. Есть много способов что-то сделать на этом фреймворке, и мы концентрируемся на том, как разрабатывать правильно.

Результат обучения

  1. Вы хорошо понимаете тонкости AngularJS, его декларативный стиль и компонентный подход.
  2. Вы знаете, как быстро сделать прототип проекта, а после чего превратить его в большое структурное многомодульное веб приложение, стабильно работающее и не имеющее проблем с производительностью.
  3. Вы разбираетесь в исходном коде фреймворка и он является лучшей документацией для вас.
  4. Вы знаете все типичные ошибки, которые допускают при работе с AngularJS, и можете их избежать.
  5. Вы четко представляете процесс перевода приложения на Angular2.

Системные требования

Windows или Mac поддерживаются полностью.

Под Linux онлайн-участие работает, но для просмотра записей занятий нужен Dual Boot в Win/MacOS.

Для онлайн-общения желателен интернет от 256kb/s.

Комментарии

перед тем как писать…
  • Приветствуются комментарии, содержащие дополнения и вопросы по статье, и ответы на них.
  • Для одной строки кода используйте тег <code>, для нескольких строк кода — тег <pre>, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)
  • Если что-то непонятно в статье — пишите, что именно и с какого места.