Что такое Angular

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

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

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

👉 Что такое фрейм­ворк и чем он отли­ча­ет­ся от биб­лио­те­ки

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

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

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

  1. Поль­зо­ва­тель пере­хо­дил на сайт. 
  2. Бра­у­зер отправ­лял сер­вер­ный запрос на поиск нуж­но­го адреса. 
  3. Сер­вер нахо­дил стра­ни­цу и пере­да­вал её на сайт. 
  4. Поль­зо­ва­тель смот­рел на эту стра­ни­цу и нажи­мал на какую-то ссылку.
  5. Бра­у­зер фор­ми­ро­вал повтор­ный запрос, сер­вер соби­рал новую стра­ни­цу и сно­ва воз­вра­щал её на сайт. Цикл повто­рял­ся после каж­до­го дей­ствия пользователя. 

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

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

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

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

  1. Поль­зо­ва­тель пере­хо­дит на сайт. 
  2. Бра­у­зер отправ­ля­ет сер­вер­ный запрос. 
  3. Сер­вер воз­вра­ща­ет стра­ни­цу по запра­ши­ва­е­мо­му URL-адресу. 
  4. Пока поль­зо­ва­тель нахо­дит­ся на пер­вой стра­ни­це, сер­вер упа­ко­вы­ва­ет и пере­да­ёт все осталь­ные стра­ни­цы в фоно­вом режиме. 
  5. Когда поль­зо­ва­те­лю нуж­но перей­ти на дру­гую стра­ни­цу, у него «в фоне» уже загру­же­но всё необходимое.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как изучить Angular

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

  1. HTML, CSS, JavaScript — база для запус­ка сайта. 
  2. TypeScript — реко­мен­до­ван­ный язык для Angular-приложений. 
  3. Git и GitHub — инстру­мен­ты хра­не­ния кода и команд­ной работы. 
  4. Пакет­ные мене­дже­ры — тех­но­ло­гия уста­нов­ки про­грамм и обновлений. 
  5. Пре­про­цес­со­ры — син­так­сис для упро­щён­но­го напи­са­ния кода. 

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

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

Что дальше

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

Текст и иллюстрации:

Алек­сандр Бабаскин

Редак­ту­ра:

Мак­сим Ильяхов

Худож­ник:

Даня Бер­ков­ский

Кор­рек­тор:

Ири­на Михеева

Вёрст­ка:

Мария Дро­но­ва

Соц­се­ти:

Олег Веш­кур­цев