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

На протяжении многих лет мы обучали тысячи разработчиков Angular и получили много отзывов о наиболее распространенных проблемах обучения.

В этом посте мы собрали то, что, по нашему мнению, является лучшим способом изучения Angular, чтобы быстро освоить его.

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

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

Оглавление

В этом посте мы обсудим следующие темы:

  • Угловой для начинающих
  • Глубокое погружение в Angular Core
  • RxJ на практике
  • Угловые формы в глубину
  • Угловой маршрутизатор в деталях
  • Шаблоны реактивного проектирования
  • Данные NgRx и NgRx
  • Угловое тестирование
  • Угловой материал
  • Угловая безопасность
  • Угловой универсальный
  • Прогрессивные веб-приложения
  • REST с NestJs и MongoDB
  • Firebase и AngularFire
  • Онлайн-платежи

Угловой для начинающих

Об Angular нужно многому научиться, и одна из главных опасностей для новичка — запутаться и даже не знать, с чего начать!

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

  • Компоненты
  • Вход, Выходы, События
  • Основные директивы; нгфор, нгесли и т.д.
  • Стилизация компонентов, ngClass, ngStyle и т. д.
  • Трубы
  • Основы внедрения зависимостей
  • Услуги
  • HTTP-клиент (GET, POST, PUT, DELETE)
  • Модули

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

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

Курс Angular для начинающих — это бесплатный курс длительностью более 2 часов, который направлен на то, чтобы начинающий пользователь Angular освоился с основными понятиями основных частей фреймворка:

Обратите внимание, что этот курс, как и все курсы в этом списке, имеет рабочий репозиторий Github, доступный на Странице Angular University Github.

В этих репозиториях github в основной ветке есть законченное решение всех упражнений курса в виде примера приложения Angular.

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

Обратите внимание, что программирование не является обязательным для прохождения любого из курсов. Каждый курс по-прежнему будет иметь смысл, если вы будете проходить их, просматривая их, например, на планшете, если у вас нет под рукой рабочего стола.

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

Глубокое погружение в Angular Core

После курса для начинающих мы уже подходим к нашей первой точке ветвления на вашем пути обучения Angular.

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

Если вы хотите с самого начала изучить все расширенные функции, которые предлагает нам модуль Angular Core, вы можете потратить некоторое время на изучение следующих функций:

  • Крючки жизненного цикла (ngOnInit, ngOnDestroy и т. д.)
  • @ViewChild и AfterViewInit
  • @ViewChildren
  • ng-контент и компонентная проекция
  • @ContentChild и AfterContentInit
  • @ContentChildren
  • ng-шаблон и ng-контейнер
  • ngTemplateOutlet
  • Обнаружение изменений (по умолчанию, OnPush и пользовательское)
  • Просмотр режимов инкапсуляции
  • Пользовательские директивы
  • Структурные директивы
  • Внедрение зависимостей в деталях
  • расширенные параметры стилей: host, host-context и т. д.
  • @NgPlural и другие функции i18n
  • Угловые элементы

Angular Core Deep Dive — это 8,5-часовой курс, в котором подробно рассматриваются все эти функции, доступные в основном модуле Angular:

Обратите внимание, что курс для начинающих является подмножеством глубокого погружения в Angular Core.

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

Вместо этого для вас было бы гораздо более продуктивно вернуться к курсу для начинающих и действительно освоить эти основные основные функции, а затем на время пропустить курс Angular Core Deep и вместо этого сосредоточиться на изучении RxJ и Observables.

На практике это будет гораздо важнее с точки зрения повседневной разработки приложений и гораздо более эффективного использования вашего учебного времени.

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

RxJ на практике

Чтобы стать опытным разработчиком приложений Angular, гораздо важнее, чем знание каждой отдельной расширенной функции основного модуля Angular, иметь четкое практическое понимание Observables и наиболее часто используемых операторов RxJs.

RxJs используется во многих местах основного API Angular, а также является рекомендуемым способом построения уровня службы приложений.

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

Хотя вначале это было очень заманчиво, мы думаем, что нецелесообразно сосредотачиваться на попытках выучить слишком много операторов RxJ.

Мы считаем, что гораздо важнее иметь четкое представление о понятиях:

  • Транслировать
  • Наблюдаемый
  • Подписки
  • Наблюдаемый контракт
  • научиться читать мраморные диаграммы

Имея эти понятия, мы можем сосредоточиться на изучении наиболее часто используемых от 15 до 20 операторов RxJS, которые на практике — это все, что нам нужно для реализации подавляющего большинства вариантов использования.

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

Чтобы помочь вам изучить RxJs наиболее эффективным способом, мы предлагаем вам Практический курс RxJs:

Этот курс занимает 4,5 часа, и он очень поможет вам улучшить свои знания RxJ. Мы начнем с самого начала, введя понятия потока, Observable, контракта Observable и т. д.

Вы научитесь читать мраморные диаграммы и будете использовать их для изучения ряда очень часто используемых операторов RxJ.

Мы также рассмотрим более продвинутые концепции RxJ, такие как темы, пользовательские наблюдаемые и многое другое.

Угловые формы в глубину

После того, как вы хорошо разберетесь в ядре Angular и RxJ, мы рекомендуем вам изучить следующий модуль Angular Forms.

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

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

У вас есть два способа создания форм: управляемые шаблоном и реактивные формы, но рекомендуется использовать реактивные формы для новых приложений.

Вы можете прочитать больше о причинах, почему реактивные формы вообще предпочтительнее шаблонным.

Поскольку формы на основе шаблонов также очень популярны, для полноты картины вы можете подробно узнать об обоих типах форм в курсе Angular Forms In Depth:

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

Вы узнаете все о всевозможных расширенных темах форм, включая настраиваемые элементы управления формами, встроенные группы форм, массивы форм и многое другое.

Угловой маршрутизатор в деталях

После модуля «Формы», который вы будете использовать для построения многих экранов вашего приложения, вы захотите подумать о системе навигации по приложению.

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

Вместо этого пользователь остается на исходной HTML-странице (что объясняет название одностраничного приложения), и только определенные разделы страницы адаптируются в зависимости от заданного действия навигации.

Angular Router — это очень мощный модуль Angular, который позволяет нам решать, какие компоненты должны отображаться пользователю в зависимости от значения URL-адреса.

С курсом Angular Router In Depth (5 часов) вы узнаете все, что вам нужно знать для построения системы навигации вашего приложения с использованием Angular Router:

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

Шаблоны реактивного проектирования

Как только вы начнете создавать свое приложение Angular, уже имея хорошее представление о ядре, формах и модулях маршрутизатора, а также о RxJ, вы заметите, что начинают возникать вопросы совершенно другого типа.

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

Как эти несколько частей головоломки приложения предназначены для совместного использования, как объединить несколько концепций для реализации общих вариантов использования?

Самый распространенный способ создания Angular-приложений — в реактивном стиле, когда в значительной степени используется RxJ для интеграции уровня представления и сервиса.

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

Это включает в себя:

  • как обрабатывать состояние приложения с помощью простых RxJ
  • Умные и презентационные компоненты
  • Наблюдаемые службы без сохранения состояния
  • Развязанная коммуникация компонентов с использованием общих наблюдаемых сервисов
  • Обработка ошибок и сообщения об ошибках в реактивном стиле
  • Загрузка индикаторов в реактивном стиле
  • легкое управление состоянием RxJs сохраняет
  • Оптимистичные обновления пользовательского интерфейса
  • Управление состоянием аутентификации пользователя с помощью простых RxJ
  • Master Detail с кэшированной главной таблицей в реактивном стиле
  • Наблюдаемый паттерн с едиными данными

Курс Reactive Angular (5,5 ч) охватывает эти и многие другие паттерны:

Данные NgRx и NgRx

Мы считаем, что важно сначала попытаться разработать приложение, используя только простые RxJ, используя некоторые шаблоны проектирования, рассмотренные в курсе реактивных шаблонов.

Если затем вы столкнетесь с проблемами управления состоянием, которые нельзя легко решить с помощью простых RxJ, только в этом случае мы рекомендуем рассмотреть решение для управления состоянием.

Наиболее часто используемым решением для управления состоянием в экосистеме Angular является NgRx.

NgRx — это реализация шаблона централизованного хранилища Redux на основе RxJs, основанная на концепциях действий, редюсеров, селекторов и эффектов.

NgRx поставляется с сопутствующей библиотекой под названием NgRx Data, которая призвана упростить управление состоянием данных, подобных объектам.

Обратите внимание, что данные NgRx не предназначены для замены простых методов NgRx, а вместо этого дополняют их.

Курс NgRx (с данными NgRx) — полное руководство (6 часов) подробно описывает как данные NgRx, так и данные NgRx:

Угловое тестирование

Прежде чем приступить к работе над проектом в качестве разработчика Angular, мы считаем, что очень важно подробно изучить, как писать тесты Angular.

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

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

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

Курс тестирования Angular (5 часов) научит вас всему, что вам нужно знать, чтобы чувствовать себя комфортно при написании и устранении неполадок модульных тестов Angular с использованием фреймворка Jasmine и интеграционных тестов с фреймворком сквозного тестирования Cypress:

Угловой материал

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

Знание Angular Material не является обязательным, особенно если вы не создаете новое приложение с нуля или по какой-то причине не планируете использовать Angular Material.

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

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

Если вы хотите подробно узнать все о множестве компонентов, доступных в Angular Material, ознакомьтесь с курсом Angular Material In Depth:

Угловая безопасность

Если вы планируете перейти на должности уровня архитектуры, то более сложные темы, рассматриваемые в следующей серии курсов, станут более важными.

Одной из этих более сложных тем, безусловно, является безопасность: как вы убедитесь, что ваше приложение Angular максимально безопасно?

Веб-безопасность включает в себя множество различных подтем, поэтому в Курсе безопасности Angular (8 часов) мы сосредоточимся в основном на аутентификации и авторизации с использованием JWT (веб-токенов JSON):

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

Мы также узнаем, как выполнять авторизацию RBAC (управление доступом на основе ролей) с помощью JWT. Наше приложение будет использовать Angular для внешнего интерфейса и Node для внутреннего интерфейса.

Несмотря на то, что серверная часть построена специально для Node, все концепции безопасности серверной части, обсуждаемые с использованием Node, также применимы и к другим серверам, таким как PHP, Java, C# и т. д.

Угловой универсальный

Еще одна сложная тема, которую вы, возможно, захотите изучить, — это Angular Universal или рендеринг на стороне сервера в целом.

Это особенно верно, если вы разрабатываете общедоступное приложение, которое будет работать в общедоступном Интернете и которое вы хотели бы проиндексировать поисковыми системами.

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

В курсе Angular Universal In Depth мы рассмотрим все, что вам нужно знать, чтобы отрендерить ваше приложение на стороне сервера или даже предварительно отрендерить его во время сборки:

Прогрессивные веб-приложения

Еще одна сложная тема, о которой вам может понадобиться узнать, — это PWA или прогрессивные веб-приложения. Это стандартные веб-приложения, которые имеют возможность загружать себя в фоновом режиме на телефон или рабочий стол пользователя, как и мобильное приложение.

В Курсе Angular PWA мы возьмем существующий образец приложения Angular и превратим его в PWA с помощью Angular Service Worker.

Мы подробно изучим, как работает жизненный цикл сервис-воркера, создав собственный сервис-воркер с нуля:

REST с NestJs и MongoDB

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

Если вы планируете создавать серверную часть своего приложения также на Typescript, возможно, вам стоит изучить структуру NestJS.

Фреймворк NestJs особенно полезен для разработчиков Angular, потому что многие концепции, которые мы используем для создания интерфейса Angular (например, сервисы, внедрение зависимостей, каналы), также используются на бэкэнде.

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

В курсе NestJs на практике мы узнаем, как создать REST-бэкэнд с использованием NestJs, который обращается к базе данных MongoDB:

Firebase, Firestore и AngularFire

Если вместо того, чтобы вручную создавать свои собственные конечные точки REST, вы предпочитаете бессерверное решение с готовым управляемым бэкэндом, то мы рекомендуем проверить экосистему Firebase.

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

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

Экосистема Firebase дополнена решением для аутентификации под названием Firebase Authentication, которое позволяет вам аутентифицировать пользователей, используя множество сторонних поставщиков аутентификации, таких как Google, Facebook и т. д., а также используя простую электронную почту и пароль.

У вас также есть решение для безопасной загрузки файлов под названием Firebase Storage, и вы можете развернуть свой собственный управляемый внутренний сервер и триггеры базы данных с помощью Firebase Cloud Functions.

В курсе Firebase & AngularFire In Depth мы подробно рассмотрим все эти аспекты экосистемы Firebase:

Онлайн-платежи

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

Хотя этот курс не обязателен, если вы не работаете над приложением для онлайн-платежей, он может помочь вам создать собственный прототип нового бизнес-приложения, которое вы, возможно, захотите разработать вне работы.

Или, если вы планируете перейти на работу в стартапе, то знание того, как обрабатывать онлайн-платежи, является большим преимуществом.

В курсе Платежи Stripe на практике вы узнаете, как добавлять платежи в существующее приложение Angular, используя Stripe и Firebase (с базой данных Firestore) в качестве бэкенда:

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

Краткое содержание

Вот лучший способ изучить Angular:

  • начните с курса Angular для начинающих и освойте основные основные концепции, которые вы будете использовать все время, такие как компоненты, сервисы, модули и т. д.
  • изучите основные функции Angular, если хотите, на раннем этапе, но имейте в виду, что некоторые из этих функций реже используются на уровне приложения, поэтому вы можете изучить их позже, это зависит от вас.
  • Сосредоточьтесь на изучении основных концепций RxJ, таких как понятия потока, Observable и контракта Observable, а также наиболее часто используемых операторов.
  • Не тратьте много времени на изучение всех доступных операторов RxJ, так как это может быстро стать контрпродуктивным.
  • рано изучите модуль «Формы», так как это один из модулей, которые вы будете использовать чаще, и сосредоточьтесь на реактивных формах, а не на формах, управляемых шаблонами.
  • Узнайте, как настроить систему навигации вашего приложения с помощью маршрутизатора Angular.
  • Узнайте, как спроектировать как представление, так и сервисный уровень вашего приложения, используя простые методы RxJ, включая упрощенное управление состоянием.
  • только если этих методов недостаточно, рассмотрите возможность изучения библиотеки управления состоянием, такой как NgRx
  • NgRx поставляется с данными NgRx, которые предназначены для обработки состояния объекта. Это предназначено для использования в качестве дополнения к стандартным методам NgRx, а не для их замены.
  • Изучайте более продвинутые темы только по мере необходимости или если вы хотите улучшить свои знания в будущем: например, безопасность, рендеринг на стороне сервера или прогрессивные веб-приложения — это примеры тем, которые не важны в начале, но позже вы можете любопытно узнать больше о
  • используйте как можно больше библиотеки материалов Angular, чтобы избежать необходимости реализовывать свои собственные виджеты с нуля или использовать сторонние виджеты на основе jQuery, которые значительно увеличат полезную нагрузку Javascript на вашей странице.
  • Если вы хотите создать свой бэкэнд также на Typescript, вы можете взглянуть на NestJs, который представляет собой веб-фреймворк на основе Typescript, который повторно использует многие концепции, которые мы используем также при создании интерфейсов Angular, таких как компоненты, сервисы, модули и т.д.
  • Если вы ищете бессерверный вариант для своего бэкэнда, экосистема Firebase и особенно база данных Firestore предоставляют отличное решение. Они особенно хорошо интегрированы с Angular через библиотеку AngularFire.

Вы можете найти все курсы, перечисленные в этом посте, на домашней странице веб-сайта Angular University, упорядоченные в соответствии с рекомендуемым порядком обучения.

Надеюсь, вам понравился пост. Я приглашаю вас взглянуть на список ниже, чтобы найти другие похожие посты и ресурсы по Angular.

Я приглашаю вас подписаться на нашу рассылку, чтобы получать уведомления, когда появятся новые публикации, подобные этой: