Angular что это

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

И зачем он фронтенд-разработчику.

Если посмотреть на вакансии фронтендеров, мы часто заметим там три слова: Angular, React и Vue. Это равнозначные технологии, которые одинаково популярны и различаются в деталях. Погружение в детали отнимает время, и поэтому обычно разработчики выбирают что-то одно — изучают то, что больше понравилось.

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

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

Что было до Angular и других SPA-фреймворков

Angular работает по принципу SPA, single-page application. Чтобы понять, что это такое, надо сначала понять, чем это не является.

Традиционный подход к веб-приложениям был примерно такой:

Это можно сравнить с заказом еды в ресторане, с той лишь разницей, что заказать можно только одно блюдо за один раз. Заказал салат, съел, только потом заказал горячее. Теперь сидишь ждёшь, пока тебе его принесут. Съел горячее — заказал чай. Ждёшь, пока вскипит чайник. Принесли чай — заказал десерт. Ждёшь, когда поднимутся коржи. Вот то же самое, только в тысячу раз быстрее.

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

Что такое SPA, single-page application

Single-page application расшифровывается как «приложение на одной странице». Работает так:

👉 Single-page означает, что сайт технически работает как бы на одной странице: там есть шапка, подвал, какое-то меню, а основное «мясо» страницы загружается динамически, в фоновом режиме, без участия пользователя. Самый наглядный пример такого приложения — это соцсеть VK: пока вы листаете ленту, вам могут написать сообщение, и оно появится на экране само, без необходимости перезагружать страницу.

Без SPA вам приходилось бы постоянно перезагружать страницу с сообщениями, чтобы понять, написали вам или нет. А с SPA всё происходит само.

Как устроен Angular: компоненты

Angular-приложения состоят из независимых элементов. Эти элементы называются компонентами, и у каждого компонента своё поведение.

Например, лента новостей — один компонент. Отвечает за отображение списка новостей на странице. Кнопка «Прочитать» — другой компонент. Отвечает за переход со страницы списка новостей к выбранной новости.

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

Компоненты подчиняются жизненным циклам — меняются и работают по нескольким запрограммированным сценариям. Возьмём ситуацию, когда мы переходим со страницы списка новостей к одной новости. В этом случае компонент «Лента новостей» уничтожается и при необходимости создаётся повторно. Жизненные циклы разгружают память и ускоряют приложение.

Страница с шапкой, лентой новостей и тремя кнопками. Каждый элемент — независимый компонент, который выполняет какое-то действие внутри приложения

Как устроен Angular: модули

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

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

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

Как устроен Angular: сервисы

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

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

Взаимосвязь компонентов, модулей и сервисов

Как устроен Angular: директивы

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

Этот значок можно получить с помощью компонентов и директив. Компоненты проставлять долго — если на сайте 1 000 позиций с ценой, то возле всех нужен компонент со значком доллара. Директивы упрощают процесс — вы создаёте один новый блок, и он будет отвечать за значок доллара возле всех цен на сайте.

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

Как устроен Angular: формы

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

Взаимосвязь компонентов, модулей, сервисов, директив и форм в Angular-приложениях

Как изучить Angular

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

Требования к Angular-разработчикам периодически обновляются и публикуются на roadmap.sh. Ещё мы рекомендуем посетить madewithangular.com — это сайт с перечнем приложений и сервисов на Angular. Если не понравится результат, то вы не потратите время и выберете для обучения другой фреймворк — React или Vue.

Карта навыков фронтенд-разработчика в 2021 году. Если хотите изучить Angular — придётся освоить больше половины обязательных технологий

Что дальше

Мы рассмотрели структуру и базовые возможности Angular. Чтобы узнать больше — посмотрите официальную документацию.

Источник

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

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

Что такое Angular?

Angular — это платформа для разработки, написанная на TypeScript. Как платформа Angular включает:

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

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

Что вы создадите

Эта серия руководств проведёт вас через создание приложения со списком дел (to-do list). С помощью этого приложения вы узнаете, как использовать Angular для управления, редактирования, добавления, удаления и фильтрации элементов.

Необходимые условия

Чтобы установить Angular в вашей локальной системе, вам понадобится следующее:

Node.js

Angular требует текущую, последнюю LTS, или поддерживаемую LTS версию Node.js. Для получения информации о конкретных требованиях к версии смотрите ключ engines в package.json файле.

пакетный менеджер npm

Настройка приложения

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

Если вам будет предложено применить строгую проверку типов, вы можете ответить «yes».

Перейдите в ваш новый проект с помощью команды cd :

В браузере перейдите на http://localhost:4200/, и вы увидите ваше новое приложение. Если измените любой из исходных файлов, приложение автоматически перезагрузится.

Знакомство с вашим Angular приложением

Таким образом, с самого начала вы используете лучшие приёмы разработки.

Каждый раз, когда вы генерируете компонент, CLI создает эти четыре файла в каталоге с указанным вами именем.

Структура Angular приложения

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

Класс

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

HTML-шаблоны

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

Для ссылки на внешний HTML-файл, используется свойство templateUrl :

Чтобы указать напрямую HTML-код, используется свойство template с обратными кавычками:

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

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

Когда приложение загружает компонент и его шаблон, браузер видит следующее:

Стили

Компонент может наследовать общие стили приложения из файла styles.css или переопределять их собственными стилями. Вы можете писать стили для конкретных компонентов прямо в декораторе @Component() или указывая путь к CSS-файлу.

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

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

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

Резюме

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

Источник

Что такое Angular. Начало работы с фреймворком¶

Angular представляет фреймворк от компании Google для создания клиентских приложений. Прежде всего он нацелен на разработку SPA-решений (Single Page Application), то есть одностраничных приложений. В этом плане Angular является наследником другого фреймворка AngularJS. В то же время Angular это не новая версия AngularJS, а принципиально новый фреймворк.

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

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

Но мы не ограничены языком TypeScript. При желании можем писать приложения на Angular с помощью таких языков как Dart или JavaScript. Однако TypeScript все таки является основным языком для Angular.

Официальный репозиторий фреймворка на гитхабе: https://github.com/angular/angular. Там вы можете найти сами исходные файлы, а также некоторую дополнительную информацию.

Начало работы c Angular¶

Для работы с Angular необходимо установить сервер Node.js и пакетный менеджер npm, если они отсутствуют на рабочей машине. Для установки можно использовать программу установки node.js. Вместе с сервером она также установит и npm. При этом особого какого-то знания для работы с NodeJS и npm не требуется.

Данный файл устанавливает пакеты и зависимости, которые будут использоваться проектом. В секции dependencies в основном определяются пакеты angular, которые необходимы приложению для работы. В секции devDependencies прописаны только те пакеты, которые будут использоваться для разработки. В частности, это пакеты для работы с языком typescript (так как мы будем писать код приложения на языке TypeScript), а также пакеты, необходимые для сборки приложения в один файл с помощью сборщика webpack.

Затем откроем командную строку (терминал) и перейдем в ней к папке проекта с помощью команды cd :

Создание компонента Angular¶

Компоненты представляют основные строительные блоки приложения Angular. Каждое приложение Angular имеет как минимум один компонент. Поэтому создадим в папке src/app новый файл, который назовем app.component.ts и в котором определим следующий код компонента:

Создание модуля приложения¶

Приложение Angular состоит из модулей. Модульная структура позволяет легко подгружать и задействовать только те модули, которые непосредственно необходимы. И каждое приложение имеет как минимум один корневой модуль. Поэтому создадим в папке src/app новый файл, который назовем app.module.ts со следующим содержимым:

Запуск приложения¶

Теперь нам надо указать Angular, как запускать наше приложение. Для этого создадим в папке src (на уровень выше, чем расположены файлы app.component.ts и app.module.ts ) файл main.ts со следующим содержимым:

Также в папке src определим еще один файл, который назовем polyfills.ts со следующим кодом:

Данный файл определяет полифилы — инструменты, которые необходимы для поддержки приложения на Angular старыми браузерами.

Создание главной страницы¶

Далее определим в папке src главную страницу index.html приложения:

Определение конфигурации¶

Поскольку для определения кода приложения применяется язык TypeScript, поэтому также создадим в корневой папке проекта новый файл tsconfig.json :

Angular.json¶

Проект определяет следующие опции:

Параметр options задает параметры построения файлов. Для команды » build » здесь определены следующие опции:

Последняя опция defaultProject указывает на проект по умолчанию. В данном случае это наш единственный проект.

В итоге у нас получится следующая структура проекта:

Запуск проекта¶

И теперь, когда все готово, мы можем запустить проект. Для этого в командной строке (терминале) перейдем к папке проекта с помощью команды cd и затем выполним команду ng serve:

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

Важно отметить, что пока приложение запущено, мы можем поменять код, и Angular CLI почти моментально перекомпилирует и перезапустит приложение.

Источник

Удивительный Angular

От переводчиков

Всем привет, с вами Максим Иванов и Дмитрий Сергиенков, и сегодня мы поговорим о новостях в мире Angular. Мы подготовили для вас наиболее интересные материалы и отобрали список вопросов, который вам должен понравиться. Отметим только, что если вы будете ждать от этой статьи ответа на вопрос «Чем Angular лучше других технологий?», то придется вас огорчить, у нас не будет ответа на него. Почему? Как правило, все мнения вида «Технология X лучше технологии Y» почти всегда не более, чем отражение точки зрения высказывающегося. Однако для тех, кто только начинает изучать этот фреймворк, мы постараемся объяснить, что дает вам эта технология и какую пользу она приносит. Также не проходите мимо и ответьте на опрос, самые популярные ответы будут отправлены Игорю Минару (ведущий разработчик команды Angular). Ну что же, приступим.

Содержание:

Angular

Angular — это платформа для разработки мобильных и десктопных веб-приложений.

Current Angular version:

Current Browser support for Angular:

Брэд Грин (Brad Green, Angular Platform Engineering Director at Google): «Под платформой я подразумеваю то, что мы создали структуру поддерживаемую набором огромного количества библиотек, инструментов и сервисов, которые создают полную и масштабируемую инфраструктуру для разработки».

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

1.1. Что дает вам Angular?

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

Какие плюсы можно выделить:

Чтобы оставаться честными, стоит выделить и минусы:

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

Form Builder — для разработки поистине сложных форм, вам следует знать реактивные формы, точнее принципиально забыть про декларативные формы. Вот один из хороших примеров (реактивная форма + валидация);

Change Detection — так как Angular по умолчанию использует двустороннее связывание модели данных, то при работе с большим объемом таких данных ваши приложения будут работать медленнее, поэтому в некоторых случаях стоит позаботиться о правильной стратегии обнаружения изменений. Вы можете посмотреть на различные OpenSource проекты: PrimeNG, Angular Material, Clarity UI, Angular Bootstrap и прочие, все они используют ChangeDetection.OnPush.

Templating — синтаксис шаблонов с точки зрения абстракции изменился не слишком сильно по сравнению с AngularJS, то есть мы так же можем написать условия, циклы, связать модель данных и прочее. Все, что вам следует хорошо понять и разобраться в Angular шаблонах — что такое структурные и декларативные директивы, а также что такое Input-параметры и Output-события.

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

Annotations — к слову, многие новички не знают, но стоит отметить. Декораторы, которые используются в изобилии при написании приложений на Angular, не являются какой-то жесткой магией TypeScript. Декораторы являются спецификацией EcmaScript и когда браузеры начнут поддерживать их, они будут нативно исполняться в browser runtime. На самом деле, декораторы весьма полезны и обеспечивают довольно высокой читаемостью ваш код. Один из примеров — это валидация моделей данных с использованием декораторов или десериализация/сериализация данных.

Observables — на самом деле, здесь стоит отметить только то, что в скором времени Observables будут спецификацией EcmaScript и все это будет нативно поддерживаться в браузерах. С точки зрения теории, если раскрыть понятие Observer (наблюдатель) — это поведенческий шаблон проектирования. Также известен как «подчинённые» (Dependents). Создает механизм у класса, который позволяет получать экземпляру объекта этого класса оповещения от других объектов об изменении их состояния, тем самым наблюдая за ними.

Shadow DOM — это средство для создания отдельного DOM-дерева внутри элемента, которое не видно снаружи без применения специальных методов, является спецификацией W3C. Грубо говоря, это удобный способ создания изолированных и переиспользуемых веб-компонентов. Чисто технически, если бы браузеры уже сегодня поддерживали многие концепции, которые использует Angular, нам не потребовались бы транспайлеры и прочие системы сборки, все, что мы писали на Angular, работало бы уже нативно.

1.2. Angular-RU — русскоговорящее сообщество

Развивающееся сообщество

Совсем недавно наше комьюнити официально добавили на angular.io. Сейчас всеми силами мы пытаемся развивать его, и вы можете принять в этом участие. Вы можете вступить в наш чат в telegram (там же вы можете узнать информацию о различных стримах по Angular, которые мы проводим), либо же просто присылать нам свои pull-request(ы) или разработки и стать членом сообщества разработчиков Angular-RU.

Текущий список разработок сообщества

Список стартеров:

webpack-angular-starter — простое окружение на основе Webpack + Angular

webpack-typescript-starter — простой стартер на основе Webpack + Typescript

angular-universal-starter — репозиторий с настроенным Angular Universal

angular-nest-starter — простое единое окружение на TypeScript (Angular + Nest)

angular-kendo-ui-starter — репозиторий с настроенным Angular и Kendo UI

angular-clarity-ui-starter — репозиторий с настроенным Angular и Clarity UI

angular-ngx-kit — набор генераторов кода компонентов

angular-ionic-starter — описания по взаимодействию Angular + Ionic

angular-sws-library-starter — создание и тестирование библиотек Angular

Список npm-пакетов:

1.3. Angular Russia Meetups

Уже 2 года в Москве проходят митапы по Angular. В этом году планируется провести первый митап в Санкт-Петербурге (в скором времени появится информация, которую вы можете также отслеживать в чате AngularPiter). Если у вас есть идеи, или же вы хотите выступить с докладом, вы можете присылать свои заявки. Также, если в вашем городе уже проходят митапы, но нам об этом неизвестно, вы можете написать нам Issue по этому поводу, чтобы мы добавили вас.

1.4. Angular + StackBlitz

Самая замечательная новость, которую стоит отметить со стороны разработчиков команды Angular — это то, что они перенесли все работающие примеры в документации на современную онлайн IDE StackBlitz. То есть теперь ваши проекты, которые вы запускаете у себя локально, идентичны примерам из документации.

Если раньше они все были на SystemJS и работали в Plunker, то теперь вам достаточно зайти на официальный сайт StackBlitz и запустить одной кнопкой приложение на Angular или Ionic. Все это работает прямо в браузере, прямо там же вы можете устанавливать npm-пакеты и писать свой код на TypeScript.

Но это не все. Самое потрясающее в том, что теперь вы можете запустить любой GitHub-репозиторий с Angular-приложением прямо на StackBlitz.

Как это работает? Вам достаточно написать в адресной строке следующее:

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

1.5. Angular 6

Сейчас мы с вами поговорим о том, что нас ждет в Angular 6. На самом деле, нас ждет много всего, и это прекрасно. Уже доступна Angular 6-бета, и сейчас на каких-нибудь своих приложениях вы можете потестировать новую версию (в рамках этого вы можете заводить новые issue на официальном трекере angular в случае, если у вас что-то не работает и вы знаете как это воспроизвести). Многие также задаются вопросом, а чем же заняты разработчики команды Angular, каков их Roadmap? Теперь вы можете отследить это, для нас появился специальный ресурс hq.angular.io, там отсортированы задачи команды по приоритетам.

Новый render-движок

Скорее всего, для обратной совместимости, нам придется включать флаг для того, чтобы наши приложения теперь работали на новом render-движке Ivy. Однако стоит отметить, что это фантастическая новость. Производительность приложения и скорость работы (на основе синтетических тестов) оказалась лучше, чем на последней версии Vue. А размер приложения сократился на 90%.

Помните тот троллинг про Angular 2 (когда многие начинали переходить с AngularJS на Angular 2), когда наши приложения весили 1Мб и когда Webpack 2 падал с непонятными ошибками? Эти времена практически завершились. Да, на самом деле, Angular 2 был сырым на тот момент, но из-за горящих сроков и дедлайнов, команда Angular выпустила фреймворк как есть. Но сейчас мы понимаем, что с каждой новой версией он становится все лучше и лучше. Конечно, наш фреймворк не развивается семимильными шагами, но вполне идет к своей цели и за это следует их уважать и ставить звездочки на гитхабе.

Новый компилятор — ABC

Сейчас известно, по заявлению команды Angular, что сборка проектов с Bazel занимает 2 секунды в инкрементальной сборке, и ваши приложения будут весить считанные килобайты за счет встроенных Rollup и Uglify2. Но пока известно (из последних коммитов), что мы ждем в следующей версии Webpack 4, а использование Bazel — это еще не точно и пока лишь планы.

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

Angular Elements

Angular Elements — это проект, суть которого — возможность компилирования Angular-компонентов в Custom Elements. Это одна из долгожданных особенностей, которая позволит вам писать переиспользуемые компоненты не только в экосистеме Angular, но и использовать их в проектах на React, Vue, Ember и тд. На самом деле, будущее за Web-components, в силу их нативного применения.Это позволит вам в принципе избавиться от экосистемы Angular (там, где это не требуется).

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

Уже есть куча примеров, где Angular-компоненты используются в React или Preact. Но самое главное, что это теперь возможно. Однако впереди еще много работы. Остается множество вопросов, которые следует решить. Дополнительно про Angular Elements вы можете прочитать тут.

Angular CLI update

Теперь вам не нужно будет больше беспокоиться об обновлениях своего приложения, так как начиная с Angular CLI 1.7+ будет добавлена возможность автоматического обновления зависимостей, ко всем прочему будет производиться автоматический рефакторинг устаревшего функционала.

То есть, если вы раньше писали:

То Angular CLI автоматически подменит устаревший код в такое (вероятнее всего опять же с включенным флагом):

Angular-дайджест

Официальные ресурсы

Новости в twitter

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

Angular Team (эксперты из команды Angular)

Google Developer Experts

Остальные известные эксперты:

Сообщества:

Митапы:

Этот список далеко не полный.

Сообщества

Серверный рендеринг

Cheatsheet (чит-лист)

UI библиотеки

Material Design

Важные особенности

Компоненты

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

Шаблоны

Шаблон — это ваша html-разметка, в которой вы можете описывать ваши взаимодействия с DOM на основе модели данных и событий вашего класса компонента (в примере, контроллер MyComponent).

Обнаружение изменений

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

Внедрение зависимостей

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

Директивы

Директивы позволяют получать прямой доступ к DOM ваших элементов. Они бывают двух видов: структурные и атрибутные.

Здесь внедряется сервис «ElementRef». Он представляет ссылку на элемент, к которому будет применяться директива:

Структурные директивы изменяют структуру DOM с помощью добавления или удаления html-элементов. Существует минимум три встроенных структурных директивы: ngIf, ngSwitch и ngFor.

Пайпы

Пайп (pipe) представляет собой особый обработчик, который позволяет форматировать отображаемые значения

Помимо стандартных, вы можете писать собственные

Web Workers

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

Самый распространенный способ получить данные от web-служб — это через HttpClient сервис доступный для внедрения зависимостей в ваших компонентах. Angular HttpClient довольно прост. Все, что нам нужно сделать, это вызвать метода get и передать ему url. Данный метод get возвращает объект Observable. Этот класс является частью библиотеки rxjs, которая используется во многих местах Angular’а.

Подобно обещанию (Promise), наблюдатель (Observable) не содержит в себе сразу значения. Вместо этого у него есть метод подписки(subscribe), где мы можем зарегистрировать обратный вызов(callback). Этот callback вызывается, как только результат будет доступен. Помимо обещания, Observable может вернуть более одного значения. Вы можете вернуть себе поток результатов. Но это не имеет значения в данном случае. В нашем случае Observable возвращает только одно значение.

Роутинг

Тестирование

Ahead-of-Time компиляция

Angular CLI

Angular CLI — инструмент для быстрой разработки приложений на Angular

Dev Tools

Starter Kit

Webpack стартеры

Angular Universal

Universal (изоморфный) — рендеринг приложений Angular на серверной стороне

Universal (основные ресурсы)

Основные источники

Публикации

Видеоуроки

Стайл-гайды

Angular Connect конференция

Книги

Онлайн тренинги

Подборка статей

Burak Tasci (fulls1z3)

Интеграции

Подборка компонентов

Пайпы (pipes)

Стукрутуры данных

Роутинг

Валидация

Логгирование

Производительность

Ленивая загрузка

Лоадеры

Примеры приложений

Генераторы

Инструменты документации

TodoMVC

Расширения для IDE’s

TypeScript

TypeScript позволяет вам писать код на JavaScript так, как вы этого хотите.

TypeScript является типизированным надмножеством JavaScript, который компилируется в JavaScript.

TypeScript (основные ресурсы)

Основные источники

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

Основные источники

Babel

Babel – предназначен для транспиляции современного JS кода в код работающий на предыдущем стандарте, к примеру ES5.

Babel (основные ресурсы)

Angular Online Playground

Основные источники

Babel плагины

ECMAScript включает в себя структурированные, динамические, функциональные и прототипные фичи

Основные источники

angular-es5-starter-kit Пример Angular приложения на ES5

Ionic

Ionic — это прекрасный SDK с открытым исходным кодом для разработки гибридных мобильных приложений.

Ionic (основные ресурсы)

Meteor

Meteor — веб-платформа на языке JavaScript, предназначенная для разработки Web-приложений реального времени.

Meteor (основные ресурсы)

Основные источники

NativeScript

Создайвайте действительно нативные iOS, Android приложения на JS (TS) + CSS. NativeScript — кроссплатформенный фреймворк с открытым исходным кодом.

NativeScript (основные ресурсы)

Основные источники

React Native

React Native — это фреймворк для создания нативно отображаемых iOS- и Android-приложений.

React Native (основные ресурсы)

Haxe — это высокоуровневый мультиплатформенный язык программирования с открытым исходным кодом, а также компилятор, с помощью которого можно создавать приложения и генерировать исходный код для разных платформ, сохраняя единую кодовую базу. Haxe включает в себя функциональность, поддерживаемую на всех платформах, например: числовые типы данных, строки, массивы, а также поддержку некоторых файловых форматов (xml, zip). Haxe также включает в себя поддержку платформо-специфических API для Adobe Flash, C++, PHP и других языков. Код, написанный на языке Haxe, может быть транслирован в код ActionScript 3, JavaScript, Java, C#, C++, Python, Lua, PHP, Apache CGI, а также в приложение Node.js

Основные источники

Scala

Scala — мультипарадигмальный язык программирования, спроектированный кратким и типобезопасным для простого и быстрого создания компонентного программного обеспечения, сочетающий возможности функционального и объектно-ориентированного программирования. Язык программирования Scala является «симбиозом» Java и C#.

Основные источники

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

Основные источники

Kotlin

Kotlin — статически типизированный язык программирования, работающий поверх JVM и разрабатываемый компанией JetBrains. Компилируется также в JavaScript и на другие платформы через инфраструктуру LLVM.

Представьте, что все ваши компоненты доступны вам в облаке, и все это доступно для вашей команды и синхронизировано во всех ваших проектах. Это и есть Bit.

Security

В заключение:

Во многом Angular — это не только технология, фреймворк или платформа, это люди, в конце концов. То огромное сообщество разработчиков, которые пишут на этой технологии каждый день. Стараются сделать ее лучше и рассказать другим. Поэтому, чтобы сделать фреймворк лучше, вы можете писать свои замечания и предложения на официальном Issues-трекере, присылать свои pull-request(ы). А еще вы можете присоединиться к отечественному сообществу разработчиков в Telegram. Вместе мы можем общаться на темы лучших практик в Angular, делиться опытом и знаниями. Мы открыты к тому, чтобы вы могли выступать на конференциях и митапах, вы можете присылать свои заявки, лучшие из них отбирает сам Алексей Охрименко, который старается также поддерживать наше сообщество и стремиться к его развитию. Поэтому любите Angular, пишите на Angular, развивайтесь с Angular. С вами были Максим Иванов и Дмитрий Сергиенков, пока.

Источник

Как написать одностраничное приложение на Angular.JS

Новые фреймворки для JavaScript появляются раз в полгода, поэтому трудно что-то выбрать. Рассказываем, почему Angular.JS — один из лучших вариантов.

Angular.JS — это фреймворк для работы с JavaScript, поддерживаемый Google. Он используется для создания одностраничных приложений и позволяет взаимодействовать с DOM (англ. Document Object Model — объектная модель документа).

Работает Angular.JS по схеме MVC ( англ. Model-View-Controller — модель-вид-контроллер) — она разделяет приложение на три отдельных части, которые можно изменять независимо друг от друга.

Предоставляет информацию и реагирует на команды контроллера.

Отвечает за отображение данных модели и следит за изменениями.

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

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

Чем отличается 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

Angular — это фреймворк от компании Google для создания продвинутых бесшовных (одностраничных) веб-приложений — SPA (Single Page Applications) — на языках программирования TypeScript, JavaScript, Dart.

У фреймворка открытый исходный код. Продукт распространяется бесплатно. Найти исходные файлы и дополнительную информацию можно в официальном репозитории фреймворка на GitHub.

Название читается как «Ангуляр» и переводится на русский как «угловой». Фреймворк назвали в честь угловых скобок, которыми обрамляют HTML-теги.

Чем Angular отличается от AngularJS

Angular — наследник AngularJS, написанного на JavaScript. Несмотря на похожие названия, это разные фреймворки. AngularJS еще называют версией 1.x. Фреймворк существует с 2009 года. Сейчас он находится в режиме long time support. Это значит, что его продолжают поддерживать, но новые возможности во фреймворк уже не добавляют. На AngularJS написано много legacy-кода.

Новая версия — Angular, он же Angular 2.x и далее. Фреймворк написан на TypeScript и несовместим с AngularJS. Его выпустили в 2016 году и с тех пор развивают. У Angular другая архитектура, а писать на нем можно и с TypeScript, и с JavaScript.

Устройство фреймворка Angular

Компоненты

Компоненты — это большие составные части приложения, не зависящие друг от друга. Например, один компонент — это лента новостей, другой — шапка сайта. Приложение строится из них, как из блоков. Обычно каждый компонент хранится в отдельном файле. Для него можно создать свои HTML-шаблон и CSS-стили. Они могут находиться в том же файле, что и компонент, а могут подключаться отдельно. Создается готовый блок интерфейса со структурой, стилями и определенной логикой поведения.

Модули

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

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

Формы

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

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

Сервисы

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

Директивы

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

Что необходимо для работы с Angular

Node.js

Это платформа для работы с JavaScript и TypeScript. Подробнее о ней можно прочитать в нашей статье. Node.js нужна для установки и запуска Angular.

Это пакетный менеджер, который позволяет с помощью одной команды скачать нужный пакет данных. С его помощью обычно устанавливают фреймворки и библиотеки. Его пакеты также требуются для нормальной работы Angular. Обычно npm уже включен в Node.js.

TypeScript

Писать на Angular можно и на чистом JavaScript, и на других его вариациях. Но так как TypeScript является основным для фреймворка, должна быть возможность с ним работать.

Преимущества Angular

Обилие возможностей

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

Универсальное применение

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

Подробный style guide

Особенность Angular — подробная документация. Она содержит рекомендации к построению и разработке приложений, style guide — гайд по стилю программирования на Angular. Это удобно для разработчиков, которые впервые столкнулись с фреймворком. Единство стиля помогает программистам лучше понимать код друг друга.

Поддержка от Google

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

Недостатки Angular

Сложность в изучении

Angular считается одним из самых сложных фронтенд-фреймворков. Его может быть нелегко изучить с нуля самостоятельно. Кроме того, для начала работы потребуется знать не только «чистый» JavaScript, но и TypeScript, который на нем основан.

Отсутствие совместимости между старой и новой версиями

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

Как начать работать с Angular

Разработчики рекомендуют начать с установки консольного интерфейса Angular CLI. Его можно скачать и установить с помощью пакетного менеджера npm:

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

Например, команда «Создать новое приложение» будет выглядеть как:

После этого можно ввести дополнительные флаги. А команда ng serve, выполненная из папки проекта, собирает и запускает приложение для отладки.

Источник

Что такое Angular?

Иногда стоит обернуться назад и посмотреть на мир разработки глазами новичка. В компании Progress мы часто используем Angular. Angular — это основная составляющая нашего веб-фреймворка Kendo UI, так же, как и фреймворка для мобильных приложений NativeScript. Поэтому у нас часто спрашивают, что такое Angular и как его использовать. Когда появился Angular? Кем он поддерживается? Почему мы используем Angular? Когда его лучше не использовать?

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

Как же появился Angular?

Miško рассказал о том, как возникла идея создать фреймворк в интервью 2013 года:

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

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

Домашняя страница Angular по состоянию на декабрь 2009 года (из Internet Archive).

Скоро Miško начал работать в Google, а в 2010 году занялся проектом Google Feedback. Miško убедил своего менеджера, Brad Green, переписать проект, используя его Angular. Оптимизация сроков и кода, которые показала команда в работе, помогли убедить Google в силе Angular.

Brad Green и Miško Hevery показывают, как много времени и сил удалось сэкономить на проекте, используя Angular. Это скриншот презентации на конференции ng-conf 2014 keynote, которую стоит посмотреть, если вы хотите знать всё о происхождении Angular.

Вскоре после успеха Google Feedback та же команда переписала open-source библиотеку и в мае 2011 года была выпущена версия Angular 1.0. В течение нескольких лет Angular стремительно набирал популярность, и сегодня Google заявляет, что более 1,5 миллиона разработчиков используют Angular.

Что делает Angular?

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

Когда использовать Angular?

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

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

Окончательный результат демо-приложения Tour of Heroes из Angular документации.

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

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

Кто поддерживает Angular?

Angular Core Team состоит из большого количества людей во всем мире и из сообщества Angular. При этом большая часть разработок Angular изо дня в день осуществляется сотрудниками Google. Примерно 20 сотрудников Google входят в Angular Core Team и все ТОП-разработчики проекта Angular являются сотрудниками Google.

Следует отметить, что, несмотря на контроль Google над Angular, сам фреймворк по-прежнему много в чём зависит от усилий сообщества. Более двух тысяч человек внесли свой вклад в open-source репозиторий Angular, в общем доступе есть бесчисленные туториалы и guides, многочисленные компании предлагают обучение и набор инструментов для разработчиков.

Если контроль над проектом принадлежит одной компании, это неплохо, так как снижает конфликтные вопросы при принятия нестандартных решений.

Какую версию Angular мне лучше использовать?

На данный момент существует две популярные версии Angular. Версия 1 доступна на https://angularjs.org/ и является обновлённой версией того Angular, что был представлен Miško и его командой в 2011 году. Другая популярная версия теперь называется просто Angular и доступна на https://angular.io/. Современный Angular – это полностью переделанная версия для новых браузеров, рабочих процессов и платформ разработки.

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

Как выглядит Angular-приложение?

Теперь, когда вы имеете некоторое представление об Angular, давайте углубимся в код. Начнём с небольшого приложения “hello world”. Все приложения Angular начинаются с НТМL-страницы, которая выглядит следующим образом.

В реальном приложении тег внутри тега может быть немного сложным, но в высокоуровневых приложениях он такой же, как и другие веб-приложениях – вы загружаете кусок JavaScript-кода в HTML-документ, и приложение работает.

Такие пользовательские теги называют компонентами, и вы можете определять их поведение в коде. Вот простейшая реализация элемента :

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

TypeScript – надстройка над JavaScript, то есть весь синтаксис JavaScript доступен на TypeScript. Кстати, весь приведённый выше синтаксис – import, export, @Component и остальные – это или нынешние фичи JavaScript, или те, что появятся в ближайшем будущем. Так что, когда вы учите TypeScript, вы изучаете будущее JavaScript. TypeScript, к тому же, отличается превосходной документацией, к которой вы можете обратиться в любое время.

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

Давайте еще раз посмотрим на TypeScript-код, определяющий компонент :

Отображение базового примера “Hello World” в браузере.

Зачем мне использовать Angular?

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

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

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

Пользуясь Angular, не рассчитывайте на простоту фреймворка, но будьте уверены в его невероятной надёжности и хорошей документации. Этот фреймворк прошёл не одно боевое испытание и заслужено используется миллионами разработчиков для написания крутых приложений. Сообщество Angular – огромное, и все хелпы легко найти в Google, Stack Overflow и по всему интернету. Ищите разработчика? Тысячи Angular девелоперов откликнутся на ваш запрос. Есть даже специальные рекрутинговые сайты.

А вот как этот код работает в нативных iOS и Android приложениях.

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

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

Источник

Всемирная история. Angular

Гимн любимому Ангуляру: поём о его прошлом, настоящем и будущем.

Поэтому мне, как и многим разработчикам с бэкендерским бэкграундом, пришёлся по душе Angular в связке с TypeScript: тут тебе и строгие типы, и привычный MVC, и другие паттерны разработки.

Смутные времена

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

Такая же пропасть пролегла между разработчиками этих приложений: одни писали на мощных тяжёлых языках вроде Java и C и знать не хотели «об этих ваших дурацких джаваскриптах». На другой стороне фаворитами были совсем другие скиллы: HTML, CSS, JavaScript, PHP, Ruby.

Пожалуй, первый серьёзный шаг к объединению этих двух миров сделала Google. Её библиотеки и компилятор из Closure Tools позволили создавать веб-приложения, возможности которых были сравнимы с десктопными, — например, Gmail. Правда, под капотом у всего этого была та же Java, так что веб-разработчики с их стеком технологий пока что оставались не у дел.

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

Итак, с одной стороны, тяжёлые гугловые библиотеки не давали веб-разработчикам нормально использовать HTML и CSS, а с другой — самые отважные веб-разработчики пилили сложные приложения на чистом JavaScript или c jQuery.

Лучи надежды

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

Пионером стал SproutCore — в нём были виджеты, из которых собирались приложения без HTML и CSS.

За ним последовали GWT, Capuccino и им подобные. Фреймворки этой эпохи избегали чистого JavaScript — они преобразовывали в него код на других языках. Например, для GWT это была Java, а в Capuccino — Objective-J. Опять же, всё это было удобно для десктопных разработчиков, которые могли делать веб-приложения привычными методами, но не для веб-девелоперов.

Новая эра началась с появлением Backbone, Knockout, а потом и Ember. Веб-разработчикам наконец-то предложили создавать приложения привычными средствами. Однако ни один из этих фреймворков не стал популярным.

Мир ждал своего героя, и этот герой пришёл в 2010 году. И имя ему было Angular.

Angular. Истоки

А началось всё годом ранее. Тогда разработчик из Google Мишко Хевери (Miško Hevery) с его коллегой и другом Адамом Абронсом (Adam Abrons) корпели над личным проектом. Конечно, в свободное от работы время 🙂

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

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

Имя проекта предложил Адам Абронс. Проект задумывался как надстройка над HTML, а в синтаксисе HTML используются угловые скобки, отсюда и Angular, что значит «угловой».

Домен angular.com был занят, поэтому под свой проект разработчики зарегистрировали getangular.com:

Проспорить и выиграть

Широкому распространению Angular помог случай. Брэд Грин (Brad Green), начальник Мишко Хевери в Google, поручил ему работу над внутренним проектом — Google Feedback Tool. Это было приложение для сбора обратной связи: отзывов о продуктах компании и предложений для их улучшения.

Мишко с двумя коллегами, используя фреймворк GWT, за полгода написали порядка 17 000 строк кода. И чем больше они писали, тем сложнее становилось этот код понимать и отлаживать.

Тогда Мишко и поспорил с Брэдом, что реализует то же самое на Angular за две недели. И что вы думаете? Проспорил! Ему понадобилось три недели, но и это впечатлило Грина. Тем более новый проект содержал всего-то около 1 500 строк. Так что Грин возрадовался и благословил продолжение работы над Angular. Так pet-проект двух друзей получил новый, уже официальный статус.

Не все в Google верили в успех нового фреймворка. Так, старший технический менеджер Урс Хёльцле (Urs Hölzle) заявил: « Ребята, не обманывайте себя и других: да, вы добились успеха в одном небольшом проекте — небольшом по меркам Google. Но пока вы не сделаете что-то крупное, радоваться рано».

Будущее, впрочем, показало, что и сам Урс не понимал, с чем имеет дело: Angular быстро покинул стены Google, и его стали использовать разработчики по всему миру.

В чём сила Angular

С появлением Ангуляра дизайнеры и веб-разработчики наконец-то вздохнули с облегчением. Фреймворки до него обращались с HTML и CSS как с инструментами для варваров: они избегали их, считали тем, к чему не должен прикасаться ни один цивилизованный разработчик. Ангуляр же отнёсся к ним с должным уважением.

Разработчики также оценили концепцию two-way data binding (двусторонней привязки данных) — изменения в данных тут же отражались на странице, и наоборот: пользовательские изменения сохранялись в связанных переменных.

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

То же относится к сервису анимации или обёрткам для стандартных объектов window и location, которые теперь стали доступными для юнит-тестов.

Window и location — это встроенные объекты браузера для управления его окнами и URL-адресами. С их помощью можно, например, открыть новое окно или загрузить ресурс по указанному URL.

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

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

Angular. Новые угрозы

Как только ящик Пандоры открылся, новые несчастья инструменты разработки веб-приложений не заставили себя ждать. В 2013 появился на свет React — детище Facebook*, а годом позднее — Vue.js.

У Vue нет покровителя в лице известной компании. Его развивает и продвигает команда во главе с его автором Эваном Ю (Even You), экс-сотрудником Google, а ныне независимым разработчиком. По его словам, фреймворк был вдохновлён Angular, но избавился от его «излишней сложности».

React — это JavaScript-библиотека, которая в правильном окружении (с другими библиотеками) позволяет создавать быстрые и гибкие веб-приложения. Её ценят за лёгкость, высокую производительность приложений и низкий порог входа

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

Angular. Возрождение

Новый Ангуляр не стал менее функциональным, но его стало проще изучать: в нём уменьшилось число абстракций, которые раньше приходилось различать разработчикам. Больше не нужно было помнить о разнице между фабриками, контроллерами, службами, обо всём, что легко сбивало с толку новичков. Код стал проще и читабельнее.

Angular 2 переписали на TypeScript — это надмножество (расширение) JavaScript. Благодаря строгой типизации разработчикам стало проще разбираться с документацией и копаться в исходниках: правильно названные типы и методы — сами себе документация.

При этом поклонников ванильного JavaScript тоже не обидели: код по-прежнему можно было писать и на чистом JS. Более того, создатели сделали реверанс в сторону Dart — появилась ветка для разработки Angular + Dart. Сейчас это отдельный проект Angular Dart.

С тех пор было ещё много релизов, и в конце 2020 года вышла уже 11-я версия Angular. Вот, например, что появилось в новых версиях:

Стабильность фреймворка Angular 2 с самого его выхода вернула часть разработчиков, которых разочаровал уход AngularJS в старообрядчество.

Кроме того, новый продвинутый Ангуляр привлёк корпоративных девелоперов: когда ты пишешь и поддерживаешь приложения, которые живут десятилетиями, ты ценишь мощный фреймворк, который выпускает релизы стабильно и при этом не меняется слишком уж сильно. Так, разработчик, который раньше писал только на Angular 2, может без особого труда начать разрабатывать хоть на Angular 5, хоть на Angular 11.

Angular. Что дальше?

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

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

Итоги этих исследований обычно говорят в пользу React, популярность Vue с годами тоже растёт, а вот с Angular — обратная тенденция. Так что же — всё плохо?

Может и нет. Да, начать писать на Реакт можно даже после кратких курсов. Но не повод ли это, напротив, изучать Ангуляр? Ведь тогда вы не будете конкурировать с толпами людей, которые те самые курсы Реакта окончили и теперь активно ищут применение своим новым навыкам 😀

Есть мнение, что найти работу со знанием Angular легче, чем в случае с React или Vue. А если вы бэкендер, но планируете стать фулстек-программистом, то освоиться с Angular вам, возможно, будет даже проще, чем с JavaScript-библиотеками: в нём много концепций, привычных по бэкенду.

Ангуляр активно продвигает компания Google. В roadmap проекта на официальном сайте анонсированы оптимизация сборки, улучшение эргономики, уменьшение времени прогона тестов и другие нововведения. Помимо самой Google, фреймворк используют Microsoft, Forbes, PayPal, The Guardian. Оказывается, даже они, как и многие, готовы жертвовать гибкостью в пользу широких возможностей и продуманной архитектуры.

Если хотите вступить в этот клуб, начните с нашего курса «Angular». Научиться разрабатывать приложения с этим мощным фреймворком — значит стать более востребованным специалистом.

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

jQuery — JavaScript-библиотека с функциями для связывания HTML, CSS и JavaScript. Она позволяет обращаться к элементам страницы с помощью краткого синтаксиса: выбирать их по разным атрибутам и условиям, манипулировать ими.

Также в ней содержатся удобные методы для работы с AJAX — это технология, которая позволяет обращаться к серверу и отображать изменения на странице без её полного обновления.

Pet-проект (от англ. pet — «домашний питомец/любимец») — проект, который делают для себя, в свободное от работы время.

Pet-проекты помогают развиваться в профессии, осваивать новые технологии и оставаться востребованным на рынке.

При внедрении зависимостей объект получает с более высокого уровня управления другие объекты, от которых он зависит. Сам он их экземпляры не создаёт.

HttpClient — класс для взаимодействия с сервером по протоколу HTTP.

Ящик Пандоры — это артефакт из греческой мифологии; в нём хранились всевозможные напасти. В статье употребляется иронично: конечно же, мы не считаем другие фреймворки и библиотеки несчастьями.

Dart — язык программирования, созданный Google как улучшенная альтернатива чистому JavaScript.

Roadmap (в переводе с английского «дорожная карта») — это графическое представление целей и результатов проекта на временной шкале.

Источник

Введение в 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

Источник

Платформы Angular в деталях. Часть 1. Что такое платформы Angular?

Инфраструктура для разработки приложений Angular была задумана как платформенно-независимая технология (далее по тексту — фреймворк). Такой подход позволяет запускать приложения на Angular в разных средах: в браузере, сервере, веб-воркере и даже на мобильных устройствах.

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

Содержание

Angular — это кроссплатформенный фреймворк

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

Браузер

Сервер

Приложения на Angular могут компилироваться и запускаться на серверной стороне. В этом случае мы можем компилировать Angular-приложение в статические HTML-файлы и затем отправлять эти файлы клиентам.

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

Веб-воркер

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

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

Web worker с самого начала была экспериментальной средой, и к моменту появления Angular 8 она устарела.

NativeScript

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

Но как это вообще возможно — запускать Angular-приложения в разных средах?

Что такое платформы Angular?

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

Здесь для нас важны две части:

Если мы слегка её перепишем, обнаружится одна интересная деталь:

Здесь platformCoreDynamic — это функция родительской фабрики платформ. Мы можем рассматривать platformCoreDynamic и platformBrowserDynamic как состоящие в иерархии наследования. Поэтому функция createPlatformFactory просто помогает нам получить из одной фабрики платформ другую. Всё просто.

Так что полная иерархия для platformBrowserDynamic выглядит следующим образом:

Однако фабрики платформ Angular не меняют поведения родительских фабрик платформ в процессе наследования. Они обеспечивают наши приложения дополнительными токенами и сервисами.

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

Вот суперупрощённый алгоритм для createPlatformFactory :

Когда мы вызываем эту функцию, она возвращает функцию фабрики платформ, которая принимает дополнительные StaticProviders для наших приложений. И если мы используем родительскую фабрику платформ, функция createPlatformFactory вызовет её и вернёт её значение или же просто создаст и вернёт новую платформу. Для лучшего понимания рассмотрим процесс создания platformBrowserDynamic шаг за шагом:

Здесь мы можем заметить ту же ситуацию: из-за существования родительской платформы мы просто возвращаем результат фабрики родительской платформы с дополнительными провайдерами:

6. Но внутри platformCore у нас несколько другая ситуация.

8. Теперь у нас есть PlatformRef :

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

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

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

Как Angular-платформы делают возможным кроссплатформенный запуск

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

Всё дело в абстракции. Как известно, Angular в значительной степени основана на системе внедрения зависимостей. Именно поэтому довольно большая часть самой Angular представлена абстрактными сервисами:

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

Но этим абстрактным классам не хватает реализации или функциональности. Когда мы используем браузерную платформу, она даёт собственные средства реализации для этих сервисов:

Когда же мы используем, скажем, серверную платформу, она даёт уже свои собственные средства реализации этих абстрактных базовых сервисов:

Теперь приведём конкретный пример.

Когда мы используем браузерную платформу, она даёт соответствующие средства браузерной реализации для этого абстрактного класса:

BrowserDomAdapter взаимодействует с браузерным DOM непосредственно, и поэтому не может быть использован где-то ещё, кроме браузера.

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

DominAdapter не взаимодействует с DOM, так как у нас нет DOM на серверной стороне. Вместо этого он использует библиотеку domino, которая имитирует DOM для node.js.

В результате имеем следующую структуру:

Заключение

Источник