Введение в Angular
Что такое Angular. Первый проект
Angular представляет фреймворк от компании Google для создания клиентских приложений. Прежде всего он нацелен на разработку SPA-решений (Single Page Application), то есть одностраничных приложений. В этом плане Angular является наследником другого фреймворка AngularJS. В то же время Angular это не новая версия AngularJS, а принципиально новый фреймворк.
Angular предоставляет такую функциональность, как двустороннее связывание, позволяющее динамически изменять данные в одном месте интерфейса при изменении данных модели в другом, шаблоны, маршрутизация и так далее.
Одной из ключевых особенностей Angular является то, что он использует в качестве языка программирования TypeScript. Поэтому перед началом работы рекомендуется ознакомиться с основами данного языка, про которые можно прочитать здесь.
Но мы не ограничены языком TypeScript. При желании можем писать приложения на Angular с помощью таких языков как Dart или JavaScript. Однако TypeScript все таки является основным языком для Angular.
Начало работы c Angular
Следует учитывать, что Angluar 13 поддерживает те версии node.js, которые в текущий момент находятся в статусе «Active LTS» или «Maintenance LTS». На момент написания данной статьи это версии от 14 и 16. Проверить статус определенной версии node.js можно по адресу: https://nodejs.org/en/about/releases/. Поэтому, если Node.js уже ранее был установлен, но имеет более старую или, наоборот новую, но еще не поддерживаемую версию, то лучше его обновить.
То же самое касается и npm. Если версия слишком старая или, наоборот, одна из последних, то Angular может ее не поддерживать. При работе с Angular лучше полагаться на ту версию npm, которая устанавливается вместе с LTS-версией Node.js.
Установка Angular CLI
Для компиляции приложения мы будем использовать инфрастуктуру Angular CLI. Angular CLI упрощает создание приложения, его компиляцию. Angular CLI распространяется как пакет npm, поэтому для его использования его необходимо сначала установить. Для установки Angular CLI откроем консоль/командную строку и выполним в ней следующую команду:
Данная команда установит пакет @angular/cli в качестве глобального модуля, поэтому в последующем при создании новый проектов Angular его не потребуется устанавливать заново.
Ту же команду можно использовать для обновления Angluar CLI при выходе новой версии фреймворка. Проверить версию CLI можно в командной строке/консоли с помощью команды:
Установка пакетов. Package.json
В папке проекта создадим новый файл package.json со следующим содержимым:
Данный файл устанавливает пакеты и зависимости, которые будут использоваться проектом. В секции dependencies в основном определяются пакеты angular, которые необходимы приложению для работы. В секции devDependencies прописаны только те пакеты, которые будут использоваться для разработки. В частности, это пакеты для работы с языком typescript (так как мы будем писать код приложения на языке TypeScript), а также пакеты, необходимые для компиляции приложения с помощью инфраструктуры Angular CLI.
В секции «scripts» описаны используемые команды. В частности, команда ng serve запускает простенький веб-сервер для тестирования приложения и само приложение. А команда ng build компилирует приложение.
Затем откроем командную строку (терминал) и перейдем в ней к папке проекта с помощью команды cd:
Определение приложения
Создание компонента Angular
Компоненты представляют основные строительные блоки приложения Angular. Каждое приложение Angular имеет как минимум один компонент. Поэтому создадим в папке src/app новый файл, который назовем app.component.ts и в котором определим следующий код компонента:
Создание модуля приложения
Приложение Angular состоит из модулей. Модульная структура позволяет легко подгружать и задействовать только те модули, которые непосредственно необходимы. И каждое приложение имеет как минимум один корневой модуль. Поэтому создадим в папке src/app новый файл, который назовем app.module.ts со следующим содержимым:
Этот модуль, который в данном случае называется AppModule, будет входной точкой в приложение.
С помощью директив import здесь импортируется ряд нужных нам модулей. Прежде всего, это модуль NgModule. Для работы с браузером также требуется модуль BrowserModule. Так как наш компонент использует элемент input или элемент формы, то также подключаем модуль FormsModule. И далее импортируется созданный ранее компонент.
Запуск приложения
Теперь нам надо указать Angular, как запускать наше приложение. Для этого создадим в папке src (на уровень выше, чем расположены файлы app.component.ts и app.module.ts) файл main.ts со следующим содержимым:
Этот код инициализирует платформу, которая запускает приложение, и затем использует эту платформу для загрузки модуля AppModule.
Также в папке src определим еще один файл, который назовем polyfills.ts со следующим кодом:
Создание главной страницы
Далее определим в папке src главную страницу index.html приложения:
Определение конфигурации
Поскольку для определения кода приложения применяется язык TypeScript, поэтому также создадим в корневой папке проекта новый файл tsconfig.json :
Angular.json
Для компиляции приложения мы будем использовать Angular CLI, поэтому нам надо описать поведение CLI с помощью файла angular.json. Итак, добавим в корневую папку проекта новый файл angular.json и определим в нем следующее содержимое:
Проект определяет следующие опции:
projectType : тип проекта. Значение «application» указывает, что проект будет представлять приложение, которое можно будет запускать в браузере
root : указывает на папку файлов проекта относительно рабочей среды. Пустое значение соответствует корневой папке проекта, так как в данном случае рабочая среда и каталог проекта совпадают
sourceRoot : определяет корневую папку файлов с исходным кодом. В нашем случае это папка src, где собственно определены все файлы приложения
Параметр options задает параметры построения файлов. Для команды «build» здесь определены следующие опции:
outputPath : путь, по которому будет публиковаться скомпилированное приложение
index : путь к главной странице приложения
main : путь к главному файлу приложения, где собственно запускается приложение Angular
polyfills : путь к файлу полифилов
tsConfig : путь к файлу конфигурации TypeScript
aot : указывает, будет ли использоваться компиляция AOT (Ahead-Of-Time) (предварительная компиляция перед выполнением). В данном случае значение true означает, что она используется
Последняя опция defaultProject указывает на проект по умолчанию. В данном случае это наш единственный проект.
Если мы используем TypeScript для работы с Angular и Angular CLI для компиляции, то эти файлы package.json, tsconfig.json и angular.json фактически будут присутствовать в каждом проекте. И их можно переносить из проекта в проект с минимальными изменениями. Например, в файле angular.json вместо названия проекта «helloapp» будет соответствующее название проекта. В файле package.json можно будет задать какие-то другие версии пакетов, если предыдущие версии устарели. Можно будет изменить название проекта, версию. Можно подправить настройки TypeScript или Angular CLI, но в целом общая организация будет той же.
В итоге у нас получится следующая структура проекта:
Запуск проекта
И теперь, когда все готово, мы можем запустить проект. Для этого в командной строке (терминале) перейдем к папке проекта с помощью команды cd и затем выполним команду ng serve :
Введем в текстовое поле какое-нибудь имя, и оно тут же отобразится в заголовке.
Важно отметить, что пока приложение запущено, мы можем поменять код, и Angular CLI почти моментально перекомпилирует и перезапустит приложение.
Стоит отметить, что консоль может быть скрыта после запуска приложения, но тем не менее оно будет запущено, и мы сможем к нему обращаться. А при изменениях произойдет его перекомпиляция.
Как написать одностраничное приложение на 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
И зачем он фронтенд-разработчику.
Если посмотреть на вакансии фронтендеров, мы часто заметим там три слова: 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-разработчикам периодически обновляются и публикуются на roadmap.sh. Ещё мы рекомендуем посетить madewithangular.com — это сайт с перечнем приложений и сервисов на Angular. Если не понравится результат, то вы не потратите время и выберете для обучения другой фреймворк — React или Vue.

Что дальше
Мы рассмотрели структуру и базовые возможности Angular. Чтобы узнать больше — посмотрите официальную документацию.
Введение в 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











