Начало работы с Angular

Введение

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

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

Кратко про Angular

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

Начиная с версии 2 разработка перешла преимущественно на язык TypeScript (https://www.typescriptlang.org/). Это позволило существенно повысить продуктивность и использовать самые последние наработки в сфере ECMAScript стандартов и функционала, который он предлагает, при этом сохранить совместимость со старыми браузерами для поддержки EcmaScript 5 как наиболее популярного стандарта и реализованного во всех браузерах.

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

Для разработки приложений стоит обратить внимание на легковесные редакторы, такие как VS Code (https://code.visualstudio.com/), Atom (https://atom.io/) и другие.

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

Курсы

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

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

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

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

1. Angular: Getting Started

Ссылка — https://app.pluralsight.com/library/courses/angular-2-getting-started-update/table-of-contents

Длительность — 5 часов 40 минут.

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

Есть много презентаций и прочего материала, есть исходный код размещенный на GitHub.

2. Angular: First Look

Ссылка — https://app.pluralsight.com/library/courses/angular-2-first-look/table-of-contents

Длительность — 4 часа 31 минут.

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

3. Angular CLI

Ссылка — https://app.pluralsight.com/library/courses/angular-cli/table-of-contents

Длительность — 2 часа 26 минут

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

Этот инструмент позволяет быстро и удобно начать работать и создавать приложения, потому что с его помощью можно почти мгновенно создать скелет приложения и далее создать нужные компоненты, модули, сервисы и прочее. По сути это must have для разработчика на Angular.

4. Angular 4 (formerly Angular 2) — The Complete Guide

Ссылка — https://www.udemy.com/the-complete-guide-to-angular-2/

Длительность — около 27 часов.

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

5. Angular Routing

Ссылка — https://app.pluralsight.com/library/courses/angular-routing/table-of-contents

Длительность — 4 часа 47 минут.

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

Стоит смотреть обязательно, по причине того, что вероятнее всего приложения будут использовать роутинг.

6. Angular Reactive Forms

Ссылка — https://app.pluralsight.com/library/courses/angular-2-reactive-forms/table-of-contents

Длительность — 3 часа 54 минуты.

Курс охватывает тему создания форм и работу с ними. В частности рассматриваются два подхода Template Driven Form и Reactive Forms. Первый подход более простой, однако требует также много манипуляций с шаблоном компонентов. Второй же подход более универсальный и позволяет создавать формы прямо в коде компонентов, что весьма удобно и это позволяет также создавать динамические компоненты.

7. Angular Fundamentals

Ссылка — https://app.pluralsight.com/library/courses/angular-fundamentals/table-of-contents

Длительность — 9 часов 59 минут.

Курс аналогичен первым двум. Содержит базовую информацию о фреймфорке и что за средства он предлагает. Можно рассматривать его как повторение или дополнение к базовым курсам.

8. Angular Material Fundamentals

Ссылка — https://app.pluralsight.com/library/courses/angular-material-fundamentals/table-of-contents

Длительность — 2 часа 46 минут.

Содержатся материалы по использованию Material Design в приложениях, а также как использовать разрабатываемую параллельно библиотеку с набором компонентов — Angular Meterial (https://material.angular.io/).

9. Building Beautiful Angular Apps with PrimeNG

Ссылка — https://app.pluralsight.com/library/courses/angular-apps-prime-ng/table-of-contents

Длительность — 3 часа 8 минут.

Курс про построение приложения с использованием компонентов PrimeNG (https://www.primefaces.org/primeng/#/). Содержит сведения о некоторых компонентах из библиотеки и показывает как можно использовать их для построения богатых пользовательских интерфейсов.

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

• Pluralsight (https://www.pluralsight.com/)
• Udemy (https://www.udemy.com/)
• EDX (https://www.edx.org/)
• Udacity (https://www.udacity.com/)
• Lynda (https://www.lynda.com/)
• и другие.

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

Русскоязычные курсы

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

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

1. ANGULAR2 ESSENTIAL

Ссылка — https://itvdn.com/ru/video/angular2_essential

Длительность — около 8 часов.

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

Статьи и руководства

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

Хорошая серия статей приводится на портале Habrahabr — дайджест материалов из мира фронтэнда (https://habrahabr.ru/company/zfort/). Это цикл статей, которые публикуются в конце каждой недели, содержащие последние сведения о произошедших событиях в мире в веб-разработке.

• Что стоит почитать об Angular 2 — https://habrahabr.ru/post/309300/ — подборка из статей для чтения.
• Руководство по Angular — https://metanit.com/web/angular2/ — некоторые статьи по работе с Angular и созданрия приложений. Просто и понятно.
• Просто Angular — https://habrahabr.ru/post/318682/ — статья о том, как началась история нового Angular и много полезного материала, описания экосистемы вокруг и прочее.

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

• Medium (https://medium.com/)
• Habrahabr (https://habrahabr.ru/)
• Reddit (https://www.reddit.com/)
• Stackoverflow (https://stackoverflow.com/)
• InfoQ (https://www.infoq.com/)
• Oreilly (https://www.oreilly.com/topics)
• Scotch (https://scotch.io/)
• и другие.

Подкасты

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

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

• Подкаст «Веб-стандарты» — https://medium.com/web-standards
• Подкаст «Frontend Weekend» — https://soundcloud.com/frontend-weekend
• Подкаст RadioJS — https://radiojs.ru/

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

Заключение

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

Ссылки

1. https://angular.io/ — официальная документация
2. https://blog.angular.io/ — официальный блог на Medium.

P.S.: Это моя первая статья на данном портале. Надеюсь в будущем буду писать еще на разные темы как по разработке, так и не только про нее.