Для чего нужен ангуляр
Зачем нужен Angular.js и почему именно он
В какой-то момент вы решаете написать веб-приложение, в котором абсолютно все работает на AJAX запросах, страница никогда не перезагружается, а интерфейс напоминает полноценное настольное приложение, а не традиционный сайт. Вы попытаетесь сделать все при помощи простого JavaScript и пары десятков jQuery плагинов, и очень быстро написанный код станет невозможно поддерживать, невозможно читать и невозможно править.
Чтобы избежать такой катастрофической ситуации, вам понадобится инструмент, предоставляющий жесткую структуру кода и соглашения о написании приложений, а также готовые решения для известных проблем (например, для двусторонней связи переменной в коде и текста на странице, выводящего значение этой переменной). Этот инструмент – JavaScript MVC (или аналоги MVC) фреймворки.
Есть большая вероятность, что вам не придётся использовать JS фреймворки ближайшие месяцы и\или годы. Область их применения довольно специфична: так называемые одностраничные приложения (Single Page Applications, SPA). Типичные примеры: Google Drive, Gmail, Evernote. Но даже в тех случаях, когда стоит задача написать одностраничное приложение, не всегда имеет смысл использовать полноценный JavaScript фреймворк: всё зависит от того, насколько динамичный и сложный UI вы пытаетесь построить.
Тем не менее популярность подобных инструментов как никогда высока, и, как минимум, знать об их существовании стоит. Рассказать обо всех доступных варинтах за раз невозможно, поэтому в этой серии статей мы рассмотрим фреймворк Angular.js. Если вас интересуют альтернативные решения, то вы можете посмотреть на них на сайте http://todomvc.com/ – авторы этого проекта реализуют одно и тоже приложение на разных фреймворках, чтобы разработчикам было легче выбрать наиболее подходящий для них.
Почему Angular.js?
С моей точки зрения, Angular.js стал потрясающей комбинацией низкого порога вхождения и богатого набора функций. Чтобы начать писать на нём небольшие приложения, понадобится около часа свободного времени. При этом на то, чтобы изучить и использовать все его фичи, понадобятся месяцы. Пока что не было ни одной фронтенд задачи, которую я не смог бы решить при помощи этого фреймворка. А использовал я его для кроссплатформенного мобильного приложения с богатой функциональностью, для небольших виджетов внутри приложений и даже для редактора видео.
Angular.js на данный момент является самым популярным фреймворком, разработка которого поддерживается парнями из Google. Помимо богатой стандартной библиотеки, для «ангуляра» написано много пользовательских расширений, с частью которых мы познакомимся в пределах этой серии статей. Есть даже специальный фреймворк поверх Angular.js, который значительно облегчает написание кроссплатформенных мобильных приложений: http://ionicframework.com.
Что насчёт Angular.js 2.0?
Текущая версия Angular.js, на которой будет основан этот цикл статей – 1.3. Разработчики заявили, что версия 2.0, которая выйдет неизвестно когда (но не раньше чем через год-полтора), будет несовместимой с текущей версией фреймворка, но при этом сохранит большинство концепций, заложенных в него. Так же разработчики обещают поддерживать версии 1.x на протяжении нескольких лет после релиза 2.0.
Это означает, что ещё как минимум 2 года Angular.js 1.x будет по-прежнему доминировать, на нём по-прежнему написаны тысячи приложений и множество вакансий (особенно в Европе) указывают именно этот фреймворках в требованиях. Конечно, в какой-то момент вам придётся потратить пару часов на то, чтобы разобраться с новой версией 2.0 и, скорее всего, пару дней на переход с 1.x на 2.0. Тем не менее, знания Angular.js не будут выброшены на помойку, ведь, как вы уже знаете, это вопрос не конкретной технологии, а умения разобраться в любой из них и применять для своей задачи 😉
Так что же мы будем делать?
В этой серии статей мы будем писать небольшой менеджер финансов: начнём с настройки рабочего окружения и структуры проекта и закончим работой с API. По пути познакомимся с основными концепциями Angular.js, роутингом, некоторыми сторонними библиотеками и несколькими важными инструментами современной фронтенд-разработки. Под конец серии вы должны уметь писать простые приложения на Angular.js и знать куда смотреть, чтобы научиться разрабатывать более сложные вещи.
Мы рассказываем, как стать более лучшим разработчиком, как поддерживать и эффективно применять свои навыки. Информация о вакансиях и акциях эксклюзивно для более чем 8000 подписчиков. Присоединяйся!
Введение в Angular: что это за фреймворк и зачем его использовать
Дата публикации: 2018-03-30
От автора: в этой статье я общими словами расскажу вам про крайне популярный и широко используемый клиентский фреймворк Angular. Это введение в основном предназначено для новичков в разработке, у кого мало опыта работы с JS фреймворками, но кто хочет изучить основные идеи Angular, а также понять разницу с AngularJS. JS фреймворк – умное словечко сегодня: все обсуждают эти фреймворки, множество разработчиков спорят о лучшем решении. Начнем же знакомство с Angular.
Зачем нужен фреймворк?
Если вы не знаете, то JS (или клиентский) фреймворк – это технология, обеспечивающая нам инструментами для создания веб-приложения, но также задающая дизайн приложения и организацию кода.
Большинство фреймворков сейчас слишком самоуверенны. У них есть своя философия того, как должно строиться веб-приложение. Вам придется потратить время, чтобы изучить базовые концепции. Другие решения типа Backbone не указывают разработчикам, как строить проект. Поэтому некоторые даже называют такие технологии просто библиотеками, а не фреймворками.
На самом деле, JS фреймворки появились не так давно. Я помню, когда сайты писали с плохо структурированным JS кодом (в большинстве случаев под управлением jQuery). Однако клиентские UI становились все сложнее, и JS потерял репутацию «игрушечного» языка. Современные сайты сильно полагаются на JS, поэтому необходимость правильной организации (и тестирования!) кода возросла. Поэтому клиентские фреймворки стали популярны, и на данный момент их, как минимум, десяток.
Введение в Angular: что такое Angular
Раньше среди JS фреймворков AngularJS был любимчиком, так как был представлен корпорацией google в 2012. Он был построен по концепции Model-View-Controller. Авторы же фреймворка называли концепцию “Model-View-*” или даже “Model-View-Whatever”.
Бесплатный курс «Laravel + Angular. Быстрый старт»
Изучите курс и узнайте, как создать веб-приложение с нуля на Angular и Laravel
Фреймворк на чистом JS должен был разъединить логику приложения и манипуляции с DOM. Его целью были обновления динамических страниц. Но это было не так навязчиво: под контролем AngularJS могла быть только часть страницы. Этот фреймворк представил много мощных функций, позволяющих разработчикам легко создавать богатые, одностраничные приложения.
В частности, была представлена интересная концепция привязки данных, по которой представление автоматически обновляется при любом изменении модели и наоборот. Поверх этого представили идею директив, которые позволяют создавать собственные HTML теги и оживлять их через JS. Например, можно написать:
AngularJS обработает этот пользовательский тег и превратит в полноценный календарь, как сказано в исходном коде. (конечно, ваша задача будет заключаться в программировании подходящей директивы)
Также была представлена важная концепция инъекции зависимостей, которая позволяет связывать компоненты приложения, облегчая повторно использование и тестирование кода. Мы не будем в этой статье подробно углубляться, но в AngularJS еще много всего.
AngularJS стал популярен очень быстро и получил большую поддержку. Тем не менее, разработчики решили пойти еще дальше и перешли к созданию новой версии Angular 2 (позже просто Angular без части JS). Фреймворк получил новое имя не просто так: он был полностью переписан и перепроектирован, а многие концепции были пересмотрены.
Первый стабильный релиз Angular 2 опубликован в 2016, после чего AngularJS стал терять популярность в угоду новой версии. Одна из главных функций Angular 2 – возможность разрабатывать под несколько платформ: веб, мобильные устройства и нативный десктоп (AngularJS по умолчанию не имел мобильной поддержки).
Чтобы еще сильнее все усложнить в конце 2016 вышел Angular 4. «А где же версия 3?», спросите вы. У меня был тот же вопрос. Как оказалось, версии 3 вообще не было опубликовано! Но как так? В официальном блоге разработчики объяснили, что с Angular 2 перешли на семантическое управление версиями.
Следуя этому принципу, изменение основной версии (например, 2.х.х становится 3.х.х) означает переломные изменения. Проблема в том, что компонент Angular Router уже был в версии 3. Чтобы исправить это несоответствие, было принято решение пропустить Angular 3. К счастью, переход с Angular 2 на 4 прошел легче, чем с AngularJS на Angular 2, но разработчиков все же смутила вся эта путаница.
В ноябре 2017 вышел Angular 5. Он совместим с предыдущими версиями Angular. Скоро должен выйти Angular 6 и должен привнести еще больше крутых функций и улучшений.
Введение в Angular: преимущества Angular
Так почему же Angular? Потому что он поддерживается на разных платформах (веб, мобильные устройства, нативный десктоп), он мощный, современный, у него отличная экосистема, и он просто крутой. Не убеждены? Позвольте немного углубиться в подробности:
Angular представляет не только инструменты, но и шаблоны дизайна для создания обслуживаемого проекта. При правильном создании Angular приложения у вас не будет путаницы классов и методов, которые сложно править и еще сложнее тестировать. Код удобно структурирован, можно быстро понять, что к чему.
Это JS, но лучше. Angular построен на TypeScript, который, в свою очередь, полагается на ES6. Вам не нужно учить полностью новый язык, и вы получаете функции типа статической типизации, интерфейсов, классов, пространства имен, декораторы и т.д.
Не нужно изобретать велосипед. В Angular уже есть много инструментов для создания приложения. Благодаря директивам, HTML элементы могут вести себя динамически. Вы можете усилить формы с помощью FormControl и представить различные правила валидации. Можно легко посылать асинхронные HTTP запросы различных типов. Можно без труда настроить маршрутизацию. В Angular есть еще много функций!
Компоненты разъединены. Angular старался убрать жесткую связь между различными компонентами приложения. Инъекция проходит подобно NodeJS, что позволяет легко заменять компоненты.
Бесплатный курс «Laravel + Angular. Быстрый старт»
Изучите курс и узнайте, как создать веб-приложение с нуля на Angular и Laravel
Все манипуляции с DOM проходят там, где должны. В Angular представление и логика приложения не связаны, что сильно очищает и упрощает разметку.
Тестирование в центре внимания. Angular тщательно протестирован и поддерживает юнит тесты и сквозное тестирование с помощью инструментов типа Jasmine и Protractor.
Angular подготовлен к мобильным устройствам и десктопу – один фреймворк под множество платформ.
Angular активно обслуживается и имеет большое сообщество и экосистему. По фреймворку можно найти много материалом и полезных сторонних инструментов.
Можно сказать, что Angular не просто фреймворк, а платформа, которая позволяет разработчикам строить приложения для веба, мобильных устройств и десктопа. Более подробно архитектуру можно изучить в этом руководстве.
Введение в Angular: сложности Angular
Должен сказать, но к сожалению, Angular довольно большой и сложный фреймворк с своей философией. Новичкам будет сложно понять и привыкнуть. Изучение концепций фреймворка – не единственная задача. Вам необходимо знать множество дополнительных технологий:
Рекомендуется писать приложения Angular на TypeScript, поэтому его нужно понимать. Можно писать код на современном JS (ES6), но я редко вижу такое.
TypeScript – надстройка JS. Поэтому ее тоже нужно знать.
Чтобы еще сильнее ускорить процесс разработки, нужно понять Angular CLI.
Для установки Angular и других компонентов активно используется npm. Его также нужно знать.
Умение настраивать таск раннеры типа Gulp или Grunt также может пригодиться. С их помощью можно много чего сделать перед развертыванием приложения в продакшене.
Сейчас широко используются минификаторы типа UglifyJS и упаковщики типа Webpack.
Во время разработки приложения очень важно иметь возможность отлаживать код. Нужно уметь работать в инструментах отладки типа Augury.
Очень важно тестировать приложения Angular, которые могут стать очень сложными. Один из самых популярных инструментов тестирования — Jasmine (фреймворк для тестирования) и Protractor (используется для сквозного тестирования).
Как видите, нужно много чего изучить, чтобы начать создавать клиентские веб-приложения. Но не опускайте руки: в сети полно ресурсов по изучению всех этих инструментов и техник. Конечно, понадобится какое-то время на изучение, но вы получите ценный опыт и сможете создавать сложные приложения с легкостью.
Стоит отметить, что иногда использовать Angular для приложения будет излишне. Если проект маленький или средний без сложного UI и взаимодействия, возможно, лучше взять старый добрый JS. Поэтому очень важно оценить все требования, функции нового приложения и дедлайны перед принятием решения об использовании JS фреймворка.
Заключение
В этом введении в Angular мы обсудили Angular, клиентский фреймворк с поддержкой нескольких платформ. Мы узнали о его некоторых функциях и концепциях, а также узнали об отличии от AngularJS, предыдущей версии фреймворка.
Надеюсь, теперь вы понимаете основную идею Angular, и где он может пригодиться!
Автор: Ilya Bodrov-Krukowski
Редакция: Команда webformyself.
Бесплатный курс «Laravel + Angular. Быстрый старт»
Изучите курс и узнайте, как создать веб-приложение с нуля на Angular и Laravel
AngularJS — фреймворк для динамических веб-приложений от Google
AngularJS создан для тех разработчиков, которые считают, что декларативный стиль лучше подходит для создания UI, а императивный — для написания бизнес-логики.
Дзен Angular
AngularJS разрабатывается сотрудниками Google и используется, как минимум, в одном сервисе Google — DoubleClick.
Примеры
Основные понятия AngularJS
Директивы
На директивах держится практически вся декларативная часть AngularJS. Именно они используются для обогащения синтаксиса HTML. В процессе компиляции DOM директивы берутся из HTML и исполняются. Директивы могут добавить какое-то новое поведение и/или модифицировать DOM. В стандартную поставку входит достаточно большое количество директив для построения веб приложений. Но ключевой особенностью является возможность разработки своих директив, за счет чего HTML может быть превращен в DSL.
Директивы могут использоваться как элемент ( ), атрибут (), в классе () или в комментарии (). Это зависит от того, как конкретная директива была разработана.
Scope-ы
Scope — это объект, имеющий отношение к модели в приложении. Он является контекстом выполнения для выражений. Scope-ы выстраиваются в иерархическую структуру, похожую на DOM. При этом они наследуют свойства от своих родительских scope-ов.
Сервисы
Для использования сервиса необходимо указать его как зависимость для контроллера, другого сервиса, директивы и т.п. AngularJS позаботится обо всем остальном — создании, разрешении зависимостей и т.п.
Фильтры
Фильтры предназначены для форматирования данных перед отображением их пользователю, а также фильтрации элементов в коллекциях. Примеры фильтров (полный список можно посмотреть в документации): currency, date, orderBy, uppercase. Использование фильтров достаточно традиционно: << expression | filter1 | filter2 >>
Модули
Приложения в AngularJS не имеют основного исполняемого метода. Вместо этого модуль выполняет роль декларативного описания того, как приложение должно быть загружено. Благодаря этому, например, при написании сценариев тестирования можно подгрузить дополнительные модули, которые переопределят какие-то настройки, облегчая тем самым комплексное (end-to-end) тестирование.
Тестирование
Как пишут разработчики, для тестирования они сделали очень много в AngularJS, поэтому уже ничего не может извинить вас, если вы не будете тестировать свое приложение 🙂
Пример тестового e2e сценария:
Подробнее о модульном тестировании и e2e тестировании в руководстве разработчика.
AngularJS Batarang
Это расширение для Chrome, которое облегчает отладку AngularJS приложений. Позволяет работать с иерархией scope-ов, дает возможность профилирования приложения, визуализирует зависимости между сервисами, отображает содержимое scope-ов на странице элементов, позволяет выводить и менять значения в scope из консоли. Хорошее текстовое описание на странице в github. Хорошее видео на youtube.
Как написать одностраничное приложение на Angular.JS
Новые фреймворки для JavaScript появляются раз в полгода, поэтому трудно что-то выбрать. Рассказываем, почему Angular.JS — один из лучших вариантов.
Angular.JS — это фреймворк для работы с JavaScript, поддерживаемый Google. Он используется для создания одностраничных приложений и позволяет взаимодействовать с DOM (англ. Document Object Model — объектная модель документа).
Работает Angular.JS по схеме MVC ( англ. Model-View-Controller — модель-вид-контроллер) — она разделяет приложение на три отдельных части, которые можно изменять независимо друг от друга.
Предоставляет информацию и реагирует на команды контроллера.
Отвечает за отображение данных модели и следит за изменениями.
Реагирует на действия пользователя и оповещает модель о том, что нужно обновиться.
Такая схема позволяет легко работать с фреймворком, быстро писать код и тестировать его.
Пишет о разработке сайтов, в свободное время создает игры. Мечтает открыть свою студию и выпускать ламповые RPG.
Чем отличается Angular.JS от других фреймворков
Главное отличие Angular.JS в том, что он позволяет вставить код прямо в HTML. Допустим, нужно, чтобы в определенном месте менялся текст, когда пользователь взаимодействует с полем ввода:
Вот как это реализуется на чистом JS:
В первом случае получается громоздкий код. Более компактно выходит на jQuery, но всё равно не сравнится с тем, как это можно написать на Angular.JS:
Всё, что мы сделали, — это указали атрибуты ng-app для контейнера и ng-model для поля ввода. Фреймворк реагировал на каждое изменение модели и записывал вводимые данные в переменную SomeText. После этого менялся текст — там, где стоит шаблонизатор <<НазваниеПеременной>>.
То есть Angular.JS самостоятельно отследил изменение поля ввода, поменял значение переменной и обновил вывод в HTML-коде. Разработчику нужно только указать директивы (об этом ниже). В этом заключается основное отличие фреймворка от других.
Давайте рассмотрим работу Angular.JS еще на одном примере. Допустим, нужно реализовать функцию переключения страниц:
Для начала нужно указать HTML-код:
В первую очередь для тега указывается атрибут ng-app (такие атрибуты называются директивами) — в нем содержится название приложения. И теперь все, что находится внутри этого тега, относится к AngularApp. Всего в коде можно указать только один такой атрибут.
Дальше была указана директива ng-controller со значением AngularController as Page. Это означает, что созданный контроллер будет работать с объектом Page. Дальше все переменные и методы вызываются с помощью этого объекта. Например, в будет отображаться поле Page.Title.
После этого создаем меню для страницы. Вместо ручного прописывания кнопок для каждой страницы можно написать такой код:
Тут указана одна кнопка с атрибутом ng-repeat. По сути, это обычный цикл forEach, который перебирает все элементы массива (в данном случае PageItem in Page.Pages). Только вместо того чтобы прописывать этот цикл в JS-коде, достаточно указать директиву.
Кнопка получила классы и атрибут ng-click, в котором прописана функция Page.MenuClick() с именем текущего элемента в качестве аргумента. Вот и сам код контроллера:
Дальше в HTML-коде создаем тело статьи:
Получился компактный код, в котором ничего не нужно делать, чтобы реализовать функцию, — просто указать места в HTML-коде, с которыми должен работать фреймворк. В контроллере были только данные о страницах и простой метод их переключения.
Где используется Angular.JS
Многие разработчики жалуются, что фреймворк работает медленно из-за того, что приходится постоянно отслеживать все модели, прописанные в коде. Однако на Angular.JS запущены крупные сайты:
Фреймворк востребован и среди менее крупных компаний — около 2300 вакансий на сайте hh.ru по запросу Angular. Поэтому новичку будет просто найти работу.
Заключение
Несмотря на противоречивое отношение программистов к фреймворку, Angular популярен. На это влияют удобство и очень подробная и понятная документация на официальном сайте Angular.JS.
Если вы только начинаете свой путь в работе с JavaScript, вам будет полезен курс по Frontend-разработке.
Что нужно знать для эффективной разработки на фреймворке Angular
Считается, что во фронтенд-разработке эквивалентом «Hello world» является приложение — список задач. Да, это позволяет охватить CRUD-аспект создания приложения, однако возможности используемых фреймворка или библиотеки при этом часто затрагиваются весьма поверхностно.
Angular постоянно изменяется и обновляется, но кое-что остается неизменным. Я расскажу об основных концепциях Angular, которые необходимо изучить, если вы хотите использовать этот JavaScript-фреймворк наилучшим образом.
Для работы с Angular нужно многому научиться, и при этом новички часто застревают на начальном уровне лишь потому, что не знают, где и что искать. Поэтому я написала руководство (в которое входит и краткое изложение основ Angular), которое мне самой очень пригодилось бы, когда я только начинала работать с Angular 2+.
1. Модульная архитектура Angular
Теоретически, можно поместить весь код Angular на одну страницу и в одну большую функцию, однако так делать не рекомендуется: это неэффективный способ структурирования кода, который мешает раскрыть предназначение Angular.
Частью архитектуры этого фреймворка является активное использование концепции модулей, которые представляют собой код, имеющий единственное предназначение. Приложение Angular в принципе и состоит из модулей, одни из которых изолированные, а другие — общие.
Упорядочить модули в приложении можно самыми разными способами. Изучая различные архитектурные структуры, можно определиться с тем, как приложение будет масштабироваться по мере развития, а также научиться изолировать код и снижать взаимозависимость.
2. Односторонний поток данных и неизменяемость
Двусторонняя привязка покорила сердца многих фронтенд-разработчиков еще во времена Angular 1 — по сути, это была одна из главных отличительных особенностей этого фреймворка. Однако по мере развития приложения такой подход начинал создавать проблемы с точки зрения производительности.
Оказалось, что двусторонняя привязка нужна не везде
Angular 2+ все еще дает возможность ее осуществить, но для этого ее необходимо явно затребовать — поэтому разработчику приходится думать о потоках данных и их направлении. Кроме того, это позволяет приложению более гибко обращаться с данными, поскольку можно указать, как следует их передавать.
3. Атрибутивные и структурные директивы
Директива — это расширение HTML с помощью дополнительных элементов. Атрибутивные директивы позволяют изменять свойства элемента. Структурные директивы изменяют макет, добавляя или удаляя элементы DOM.
Например, ngSwitch и ngIf — структурные директивы: они оценивают параметры и определяют, должны ли существовать конкретные части DOM.
Атрибутивные директивы представляют собой настраиваемое поведение, прикрепленное к элементу, компоненту или другим директивам.
Научившись использовать директивы этих двух видов, можно расширить возможности собственного приложения и снизить дублирование кода в проекте. Атрибутивные директивы также помогают централизовать определенное поведение, используемое в различных частях приложения.
4. Обработчики жизненного цикла компонента
У каждого приложения есть жизненный цикл, который определяет, как объекты создаются, обрабатываются, а затем удаляются. Во фреймворке Angular жизненный цикл компонента выглядит примерно так:
У нас есть возможность обрабатывать ключевые моменты этого цикла и нацеливаться на определенные моменты времени или события. Это позволяет создавать соответствующие отклики и настраивать поведение в соответствии с различными этапами существования компонента.
5. Наблюдаемые сервисы и HTTP
Наблюдаемые сервисы — не уникальная возможность Angular, а скорее что-то из ES7. Тем не менее, эта функциональность была реализована в рамках фреймворка, а соответствующие идеи хорошо переносятся также на React, Vue и другие связанные с JavaScript библиотеки и фреймворки.
6. Архитектура «умных» и «глупых» компонентов
Часто при написании приложений на Angular всё сваливают в один компонент, однако это не самый лучший подход. Концепция «умных» и «глупых» компонентов в Angular определенно заслуживает большего внимания, особенно в среде новичков.
Роль компонента в общем плане приложения определяется тем, «глупый» он или «умный». «Глупые» компоненты обычно не отслеживают состояние, а их поведение легко предсказать и понять — по возможности именно такими нужно делать компоненты.
«Умные» компоненты сложнее в понимании, поскольку в них задействованы входы и выходы. Для эффективного использования возможностей Angular следует разобраться с архитектурой «умных» и «глупых» компонентов: так вы овладеете шаблонами и образом мыслей, которые помогут писать более продуктивный код и выстроить правильное взаимодействие внутри приложения.
7. Стандартные структуры приложений
Умение работать с командной строкой при определении структуры приложения полезно, однако это не панацея. Создание приложения на Angular (и вообще любого приложения) похоже на строительство дома: существуют устоявшиеся процессы, за много лет оптимизированные сообществом, которые позволяют писать более эффективные и продуктивные приложения.
И Angular здесь — не исключение.
Большинство жалоб на Angular можно услышать от тех, кто пытается его изучить, не имея понимания структуры. Понятный и лаконичный синтаксис схватывается на лету, однако для понимания структуры приложения необходимо знать контекст, требования и как всё это сочетается на концептуальном и практическом уровнях. Изучив различные возможные структуры приложений на Angular и рекомендации по их применению, вы получите представление о том, как написать собственное.
8. Синтаксис для привязки к шаблону
Изюминка рассматриваемого JavaScript-фреймворка — привязка, она же и стала одной из причин его создания. Привязка к шаблону объединяет статический HTML и JavaScript, и синтаксис Angular для привязки к шаблону действует как посредник между этими двумя технологиями.
Если научиться правильно и своевременно использовать эти возможности, то превращать статичную страницу во что-то интерактивное станет намного проще и приятнее. Изучите различные сценарии привязки: привязку к свойствам, событиям, интерполяцию и двустороннюю привязку.
9. Маршрутизация и функциональные модули
В случае Angular функциональные модули обычно недооцениваются, хотя на самом деле это отличный способ упорядочить и ограничить набор бизнес-требований. Они позволяют разграничить ответственность и помогают предотвратить загрязнение кода в долгосрочной перспективе.
Функциональные модули бывают пяти типов (домен, маршрутизируемый, маршрутизация, сервис и виджет), и у каждого — свой набор возможностей. Научившись использовать функциональные модули в сочетании с маршрутизацией, вы сможете создавать отдельные наборы функций и обеспечивать понятное и удобное разделение возможностей приложения.
10. Формы и проверка данных (реактивные формы и валидаторы)
Формы — неотъемлемая часть фронтенд-разработки.
А где формы, там и проверка данных.
На фреймворке Angular создавать умные, хорошо работающие с данными формы можно различными способами, и самый распространенный подход — реактивные формы. Однако есть и другие варианты, а именно шаблонные и пользовательские валидаторы.
Изучив принципы работы валидаторов и CSS, можно ускорить рабочий процесс и подготовить приложение к обработке ошибок.
11. Проецирование контента
Во фреймворке Angular есть такое понятие, как проецирование контента, которое позволяет эффективно передавать данные из родительских компонентов в дочерние. Поначалу это может показаться сложным, однако фактически в этом случае представления помещаются внутрь других представлений — таким образом создается главное представление.
Часто проецирование контента понимается поверхностно: мы как будто вкладываем дочерние представления в родительское представление. Однако для более глубокого понимания фреймворка необходимо разобраться, как между различными представлениями передаются данные — здесь и пригодится знание концепции проецирования контента.
Изучив проецирование контента, вы научитесь разбираться в потоке данных приложения и определять, где он претерпевает изменения.
12. Стратегия обнаружения изменений «onPush»
По умолчанию Angular использует стандартную стратегию обнаружения изменений, в которой компоненты проверяются всегда. В использовании поведения по умолчанию нет ничего плохого, однако такое обнаружение изменений может быть неэффективным.
В случае небольших приложений скорость и производительность остаются на удовлетворительном уровне. Но как только приложение достигает определенного размера, запуск некоторых элементов замедляется, особенно в старых браузерах.
Стратегия обнаружения изменений onPush значительно ускоряет работу приложения, поскольку она не полагается на постоянную поверку, а зависит от срабатывания конкретных триггеров.
13. Защитники маршрутов, предварительная и отложенная загрузка
Если в приложении есть вход в учетную запись, понадобятся защитники маршрута. Суть в том, чтобы защитить определенные представления от несанкционированного просмотра, что во многих случаях является обязательным требованием. Защитники маршрута действуют как интерфейс между маршрутизатором и запрошенным маршрутом: они определяют, разрешать доступ к определенному маршруту или нет. Это довольно обширная тема: например, сюда входят вопрос принятия решений о маршрутизации на основании срока действия токенов, аутентификация ролей пользователей и защита маршрутов.
Ускорить загрузку приложения и сделать работу с ним более удобной также помогут предварительная и отложенная загрузка. Следует еще отметить, что эти инструменты не просто дают возможность принять решение, загружать ли определенный набор изображений: они помогают улучшить связанную архитектуру и загружать различные части приложения, которые могут находиться в разных доменах и областях определения.
14. Нестандартные каналы
Каналы фреймворка Angular значительно упрощают форматирование данных. Многие виды форматирования (даты, валюты, проценты и регистр символов) уже охвачены предварительно настроенными, готовыми к использованию каналами, однако вам наверняка понадобится что-то еще.
И вот здесь пригодятся нестандартные каналы, которые позволяют с легкостью создавать собственные фильтры и преобразовывать форматы данных требуемым образом. Это довольно легко — попробуйте.
15. Декораторы @ViewChild и @ContentChild
ViewChild и ContentChild используются для общения компонентов между собой. Суть фреймворка Angular в том, что используются несколько собранных вместе, как мозаика, компонентов. Однако эта конструкция не сможет ничего сделать, если ее кусочки будут изолированы друг от друга.
16. Динамические компоненты и «ng-template»
Во фреймворке Angular приложения строятся на основе компонентов. Однако не все компоненты статичны — некоторые необходимо создавать на лету, а не предварительно компилировать.
Создаваемые приложением на лету компоненты называются динамическими. Статические компоненты предполагают определенную неизменность: мы ожидаем определенные значения на входе и выходе и соответствующее предсказуемое поведение.
Динамические же компоненты отрисовываются по необходимости. Их удобно использовать при создании приложений, которые могут прослушивать внешние источники, изменение их состояния или представляют собой реакции на действия, произошедшие на странице.
17. Host, HostBinding и «exportAs»
18. Управление состоянием с помощью NgRx
Состояние приложения в конечном итоге определяет данные, отображаемые пользователю. И если приложение — комок спагетти, то есть вероятность, что вся структура данных станет ненадежной и в случае каких-либо изменений просто рухнет.
Разобравшись в том, для чего в Angular нужны состояния, вы поймете, как и почему данные ведут себя именно так, а не иначе.
У фреймворка Angular есть собственная система управления состояниями, но NgRx справляется с централизацией состояний и связанных с ними данных намного лучше. В цепочке отношений родительских и дочерних элементов данные могут затеряться, а NgRx создает для них централизованное хранилище и таким образом устраняет эту проблему.
19. Зоны и внедрение зависимостей
Внедрение зависимостей — это в целом масштабная концепция, поэтому, если вы не совсем в теме, следует разобраться подробнее. В рамках Angular есть несколько способов аккуратного внедрения зависимостей, но в основном это делается с помощью конструктора. Таким образом можно не загружать всё подряд, а импортировать самое необходимое — и, следовательно, повысить эффективность приложения.
Как и внедрение зависимостей, «зоны» были и до Angular. Они позволяют приложению обнаруживать асинхронные задачи. Это важно, поскольку асинхронные задачи способны изменять внутренние состояния приложения — а следовательно, и представление. Зоны же упрощают обнаружение изменений.
Заключение
Angular — это обширная тема для изучения. Создавая приложения на этом фреймворке, можно многому научиться, но иногда совершенно непонятно, что искать и куда копать. В самом начале бывает трудно сориентироваться в незнакомом окружении. Надеюсь, это краткое руководство дало некоторое представление о понятиях, выходящих за рамки обычных уроков по Angular, и позволило шире взглянуть на этот фреймворк в целом.
Перевод статьи выполнен в Alconost.
Alconost занимается локализацией игр, приложений и сайтов на 70 языков. Переводчики-носители языка, лингвистическое тестирование, облачная платформа с API, непрерывная локализация, менеджеры проектов 24/7, любые форматы строковых ресурсов.
Мы также делаем рекламные и обучающие видеоролики — для сайтов, продающие, имиджевые, рекламные, обучающие, тизеры, эксплейнеры, трейлеры для Google Play и App Store.