Мы собрали несколько десятков различных источников, которые помогут в изучении Angular 2. Публикуем первую часть отобранного материала.
Официальные источники
Для начала пробежимся по ресурсам, которые предлагают изучить сами разработчики.
QuickStart (TypeScript version)
Приложения на основе Ангуляр 2 можно писать на TypeScript, Dart или старом-добром чистом JavaScript. Для каждого подхода подготовлена своя версия документации, но для TypeScript она наиболее детализирована, так как это рекомендованная разработчиками технология.
QuickStart будет отправной точкой для большинства новичков в Ангуляре. Он включает в себя настройку рабочего окружения, а также написание и запуск простенького Hello World. Однако название себя не оправдывает: над прохождением начального туториала потребуется хорошо посидеть часик-другой.
QuickStart (Vanilla JavaScript version)
Несколько упрощенная версия QuickStart для TypeScript. Поскольку изучение будет проходить на чистом JavaScript, настраивать рабочее окружение толком не потребуется, поэтому этот туториал начинается прямиком с изучения фреймворка и его основных концепций.
Tour of Heroes
Tour of Heroes – более детализированный курс, чем QuickStart. Он покрывает процесс создания SPA (Single Page Application), шаг за шагом, затрагивая большинство обязательных для изучения функций Angular 2. Есть версии для TypeScript и Dart, а для чистого JS – нет.
Сторонние туториалы
Теперь давайте посмотрим, что для новичков подготовило сообщество. Мы постарались собрать самые свежие материалы, совместимые с последними изменениями.
Upgrading Apps To Angular 2 Using ngUpgrade
Хорошо написанное руководство по переезду с Angular 1 на Angular 2 для старых приложений. В нем рассказывается, что изменилось во второй версии фреймворка в лучшую сторону и что в старом приложении придется изменить сильнее всего.
Styling Angular 2 Components
Этот урок ориентирован на новичков и рассказывает о различных техниках добавления CSS в компоненты: как использовать инлайн-стили, ссылки на стили и шаблонные инлайн-стили, а также о различиях между ними.
Dependency Injection In Angular 2
Подробное изложение об улучшениях системы внедренных зависимостей и о раличиях со старой версией DI. У этой статьи также есть вторая часть, которая продолжает рассказ о host-child и видимости зависимостей.
How does Angular 2 Change Detection Really Work?
В Ангуляре 2 изменился механизм отслеживания изменений, он стал более прозрачным и простым для понимания, чем в первой версии фреймворка. Ведь, так или иначе, возникают ситуации, когда нужно знать, как это работает под капотом.
Building an Angular 2 Application for Production
Ангуляр – большой фреймворк, поэтому не удивительно, что в финальной версии может получиться приложение солидного размера. В этом посте рассматриваются подходы и техники, которые помогут уменьшить размер конечного приложения.
Taking Advantage Of Observables In Angular 2
Наблюдатели (observables) в Ангуляр 2 могут быть использованы для обработки асинхронного кода, то есть в качестве альтернативы promise’ам. Это большая тема, но в приведенной статье (из двух частей) можно ознакомиться с observables и увидеть основные кейсы их использования.
Communication Between Components & Components Design
Эта статья – интересный взгляд на паттерны проектирования в компонентах Ангуляра. Здесь рассматриваются компоненты музыкального плеера на основе YouTube и отношения между ними, все это со множеством примеров кода и пояснениями.
Optimizing NgUpgrade Bundle Sizes
NgUpgrade предназначен для преодоления разрыва между Ангуляр первой и второй версии, позволяя коду из обоих фреймворков сосуществовать в одном приложении. Это, конечно же, влечет неслабое увеличение размера приложения, и в этой публикации можно узнать, как сократить подобные издержки.
Three Ways to Test Angular 2 Components
В статье рассматриваются три подходя для тщательного тестирования компонентов Angular 2: изолированное, поверхностное и интеграционное тестирование. Все три имеют свои сильные и слабые стороны и подходят каждый для своего сценария тестирования.
Protecting Routes Using Guards
Защита маршрутов – основная вещь, которую нужно сделать, если нет желания давать пользователям доступ туда, куда им попадать не нужно. В Ангуляр 2 появился функционал, названный Guards, который преследует эти самые цели.
Debugging Angular 2 Applications
В этом гайде всесторонне рассматриваются инструменты, с помощью которых можно отлаживать приложение на Ангуляре – Chrome DevTools, Angular Augury, JSON pipe filters и консоль, в конце-концов.
Комментарии