Angular и его преимущества
Создавать веб-приложения становится проще, если для разработки вы используете фреймворк Angular. Вы столкнетесь с удивительным сочетанием декларативных шаблонов, интегрированных лучших практик, внедрения зависимостей и сквозного инструментария. Если вы знаете, как использовать расширенные возможности для разработки приложений на базе Angular, то это поможет вам преодолеть различные трудности в процессе работы. Узнайте больше о передовых практиках Angular из лучших учебников по данному фреймворку.
Но по каким причинам вы должны рассмотреть возможность использования этого фреймворка? Для этого давайте рассмотрим некоторые из его преимуществ.
Преимущества Angular
1 — Архитектура MVC
Когда вы разрабатываете приложение на стороне клиента, использование архитектуры «модель-представление-контроллер» добавляет ценность фреймворку, а также закладывает базу для других функций, таких как область применения и привязка данных.
Вы можете использовать ее для разделения задач и отделения логики приложения от слоя UI. Все запросы поступают непосредственно к контроллеру, который затем работает в режиме подготовки данных, необходимых представлению. Затем представление использует эти данные, подготовленные контроллером, для отображения финального презентабельного ответа.
2 — Расширенная архитектура дизайна
Большие веб-приложения состоят из множества компонентов. Управлять всеми этими компонентами непросто. Но использование фреймворка Angular упрощает весь процесс настолько, что даже начинающий программист, присоединившийся к проекту после начала разработки, без труда разберется в этом фреймворке. Сама архитектура фреймворка построена таким образом, что она позволяет разработчикам легко создавать или находить код.
3 — Модулярность
AngularJS использует подход модульного программирования, согласно которому приложение состоит из нескольких модулей. Каждый модуль выполняет определенную роль и обеспечивает разделение задач.
4 — Привязка данных
Возможно, вы уже слышали о привязке данных. Привязка данных означает, что ваши данные могут отображаться в различных представлениях, и изменения, сделанные в одном представлении, автоматически отражаются в другом представлении без написания дополнительного кода. AngularJS обеспечивает двустороннюю привязку данных, что означает, что и представление, и модель обновляются, когда происходит изменение в представлении или модели соответственно.
5 — Сервисы и внедрение зависимостей (DI)
Сервисы — это функции JavaScript, которые отвечают за выполнение только определенных задач. Они представляют собой объекты-синглтоны (объекты-одиночки), которые создаются только один раз в приложении. Сервисы соединяются между собой с помощью механизма внедрения зависимостей (Dependency Injection. DI). DI — это шаблон разработки программного обеспечения, в котором описывается, как компоненты получают информацию о своих зависимостях. Angular имеет свой собственный фреймворк DI, который обычно используется при разработке приложений Angular для повышения их эффективности и модульности. Это облегчает разработку, тестирование и, в конечном итоге, сопровождение больших приложений AngularJS.
6 — Директивы
Angular позволяет расширять HTML с помощью новых атрибутов, называемых директивами. Директива ng-app применяется для приложения Angular, директива ng-model привязывает значение элементов HTML (input, select, text) к данным приложения, а директива ng-bind привязывает данные приложения к представлению HTML.
7 — TypeScript — это лучший инструментарий, чистый код и более высокая масштабируемость
TypeScript — это расширение JavaScript, которое добавляет в язык необязательную статическую типизацию. Код на TypeScript компилируется в JavaScript, который может быть прочитан любым браузером, что делает его идеальным выбором для создания приложений на стороне клиента.
Статическая типизация дает разработчикам множество преимуществ, таких как улучшенный инструментарий, меньшее количество ошибок в рантайме и более чистый код. Проверка типов, выполняемая компилятором, позволяет IDE предоставлять инструменты рефакторинга, такие как интеллектуальное автозаполнение и быстрое исправление распространенных ошибок кодирования. Ошибки рантайма могут быть отловлены во время компиляции, что позволяет создавать более надежный код, который лучше работает при масштабировании.
Заключение
Существует еще много преимуществ использования механизма разработки Angular. Тем не менее, чтобы вас убедить в их наличии, я думаю, достаточно и тех, о которых мы здесь рассказали. Если вы хотите узнать все плюсы, почему бы вам не попробовать?
Angular – это мощный фреймворк от Google, который используется для создания мобильных приложений. Одной из ключевых особенностей Angular является то, что он использует в качестве языка программирования TypeScript, что также позволяет повысить читаемость кода и совершать меньше ошибок во время разработки. Основные преимущества и возможности разработки приложений на Angular разберем на открытом уроке 18 июля.
На этом уроке мы познакомимся с основными возможностями фреймворка: Angular CLI, two-way data binding, templates, routing, services. На примере увидим, как эти технологии позволяют значительно сэкономить время на разработку продукта, получить расширяемый, легко поддерживаемый и хорошо структурированный код.
- angular
- angular development
Введение в Angular
Angular представляет фреймворк от компании Google для создания клиентских приложений. Прежде всего он нацелен на разработку SPA-решений (Single Page Application), то есть одностраничных приложений. В этом плане Angular является наследником другого фреймворка AngularJS. В то же время Angular это не новая версия AngularJS, а принципиально новый фреймворк.
Angular предоставляет такую функциональность, как двустороннее связывание, позволяющее динамически изменять данные в одном месте интерфейса при изменении данных модели в другом, шаблоны, маршрутизация и так далее.
Одной из ключевых особенностей Angular является то, что он использует в качестве языка программирования TypeScript. Поэтому перед началом работы рекомендуется ознакомиться с основами данного языка, про которые можно прочитать здесь.
Но мы не ограничены языком TypeScript. При желании можем писать приложения на Angular с помощью таких языков как Dart или JavaScript. Однако TypeScript все таки является основным языком для Angular.
Последняя версия Angular — Angular 17 вышла в ноябре 2023 года. Официальный репозиторий фреймворка на гитхабе: https://github.com/angular/angular. Там вы можете найти сами исходные файлы, а также некоторую дополнительную информацию.
Начало работы c Angular
Для работы с Angular необходимо установить сервер Node.js и пакетный менеджер npm , если они отсутствуют на рабочей машине. При этом особого какого-то знания для работы с NodeJS и npm не требуется. Для установки можно использовать программу установки node.js. Вместе с сервером она также установит и npm.
Следует учитывать, что Angular поддерживает те версии node.js, которые в текущий момент находятся в статусе «Active LTS» или «Maintenance LTS». На момент написания данной статьи это версии 18 и 20. Поэтому, если Node.js уже ранее был установлен, но имеет более старую или, наоборот новую, но еще не поддерживаемую версию, то лучше его обновить. Проверить совместимость версий node.js (а также версий typescript и библиотеки RxJS) для определенных версий Angular можно по адресу: https://angular.dev/reference/versions. Так, для последний на данный момент версии Angular 17 требования следующие:
- Версия Node.js должна быть либо 18 начиная с подверсии 18.13.0, либо 20 начиная с подверсии 20.9.0
- Версия TypeScript должна быть 4.9.3 и выше, но ниже 5.3.0 (нужная версия TypeScript устанавливается локально в проект)
То же самое касается и npm . Если версия слишком старая или, наоборот, одна из последних, то Angular может ее не поддерживать. При работе с Angular лучше полагаться на ту версию npm, которая устанавливается вместе с LTS-версией Node.js.
Установка Angular CLI
Для компиляции приложения мы будем использовать инфрастуктуру Angular CLI. Angular CLI упрощает создание приложения, его компиляцию. Angular CLI распространяется как пакет npm, поэтому для его использования его необходимо сначала установить. Для установки Angular CLI откроем консоль/командную строку и выполним в ней следующую команду:
npm install -g @angular/cli
Данная команда установит пакет @angular/cli в качестве глобального модуля, поэтому в последующем при создании новый проектов Angular его не потребуется устанавливать заново.
Ту же команду можно использовать для обновления Angluar CLI при выходе новой версии фреймворка. Проверить версию CLI можно в командной строке/консоли с помощью команды:
ng version
Если Angluar CLI уже был установлен, то можно его обновить с помощью команды:
ng update
При работе на Windows и выполнении команд в PowerShell вместо командной строки стоит учитывать, что по умолчанию выполнение скриптов в PowerShell отключено. Чтобы разрешить выполнение скриптов PowerShell (что требуется для npm), необходимо выполнить следующую команду:
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
После установки необходимых инструментов создадим простейшее приложение. Для этого определим на жестком диске папку проекта. Путь она будет называться helloapp .
Установка пакетов. Package.json
В выше созданной папке проекта создадим новый файл package.json со следующим содержимым:
< "name": "helloapp", "version": "1.0.0", "description": "First Angular 17 Project", "author": "Eugene Popov metanit.com", "scripts": < "ng": "ng", "start": "ng serve", "build": "ng build" >, "dependencies": < "@angular/common": "~17.0.0", "@angular/compiler": "~17.0.0", "@angular/core": "~17.0.0", "@angular/forms": "~17.0.0", "@angular/platform-browser": "~17.0.0", "@angular/platform-browser-dynamic": "~17.0.0", "@angular/router": "~17.0.0", "rxjs": "~7.8.0", "zone.js": "~0.14.2" >, "devDependencies": < "@angular-devkit/build-angular": "~17.0.0", "@angular/cli": "~17.0.0", "@angular/compiler-cli": "~17.0.0", "typescript": "~5.2.2" >>
Данный файл устанавливает пакеты и зависимости, которые будут использоваться проектом. В секции dependencies в основном определяются пакеты angular, которые необходимы приложению для работы. В секции devDependencies прописаны только те пакеты, которые будут использоваться для разработки. В частности, это пакеты для работы с языком typescript (так как мы будем писать код приложения на языке TypeScript), а также пакеты, необходимые для компиляции приложения с помощью инфраструктуры Angular CLI.
В секции «scripts» описаны используемые команды. В частности, команда ng serve запускает простенький веб-сервер для тестирования приложения и само приложение. А команда ng build компилирует приложение.
Затем откроем командную строку (терминал) и перейдем в ней к папке проекта с помощью команды cd:
C:\WINDOWS\system32>cd C:\angular\helloapp
И затем выполним команду npm install , которая установит все необходимые модули:
C:\angular\helloapp>npm install added 923 packages, and audited 924 packages in 1m 115 packages are looking for funding run `npm fund` for details found 0 vulnerabilities C:\angular\helloapp>
После выполнения этой команды в папке проекта должна появиться подпапка node_modules , которая содержит все используемые зависимости и пакеты.
Определение приложения
Затем создадим в папке проекта подпапку, которую назовем src — она будет содержать все исходные файлы. И далее в папке src создадим подкаталог app .
Создание компонента Angular
Компоненты представляют основные строительные блоки приложения Angular. Каждое приложение Angular имеет как минимум один компонент. Поэтому создадим в папке src/app новый файл, который назовем app.component.ts и в котором определим следующий код компонента:
import < Component >from «@angular/core»; import from «@angular/forms»; @Component(< selector: "my-app", standalone: true, imports: [FormsModule], template: `
Добро пожаловать >!
` >) export class AppComponent
В начале файла определяется директива import , которая импортирует функциональность модуля angular/core , предоставляя доступ к функции декоратора @Component . И также импортируем модуль FormsModule, который понадобится для работы с полями ввода.
Далее собственно идет функция-декоратор @Component , которая ассоциирует метаданные с классом компонента AppComponent. В эту функцию передается конфигурационных объект с рядом параметров:
- параметр selector определяет селектор css для HTML-элемента, который будет представлять компонент. В данном случае это селектор «my-app». То есть на веб-странице приложения должен быть элемент «», и в этот элемент будет загружаться приложение Angular
- параметр standalone: true указывает, что компонент будет независимым, то есть для него не нужно создавать дополнительных модулей, что уменьшает и упрощает код приложения
- параметр imports импортирует в компонент другие модули. Сторонние модули могут содержать различный функционал, который мы можем использовать. Например, в нашем случае мы будем использовать поле ввода, куда пользователь будет вводить имя. И для работы с этим полем ввода импортируем в компонент модуль FormsModule.
- параметр template представляет шаблон или визуальную часть компонента — то, что мы собственно увидим в браузере. В частности, в шаблоне определено поле ввода, куда пользователь будет вводить имя. А в заголовке h1 будет выводиться введенное значение. Для связи поля ввода и заголовка применяется двусторонняя привязка поля с помощью выражений [(ngModel)]=»name» и > к некоторой модели name.
И в конце собственно экспортируется класс компонента AppComponent, в котором как раз определяется переменная name — в данном случае это пустая строка.
Запуск приложения
Теперь нам надо указать Angular, как запускать наше приложение. Для этого создадим в папке src (на уровень выше, чем расположен файл «app.component.ts») файл main.ts со следующим содержимым:
import < bootstrapApplication >from "@angular/platform-browser"; import < AppComponent >from "./app/app.component"; bootstrapApplication(AppComponent).catch(e => console.error(e));
Этот код запускает приложение в виде ранее определенного компонента AppComponent. При возникновении ошибок они выводятся на консоль.
Создание главной страницы
Далее определим в папке src главную страницу index.html приложения:
METANIT.COM Загрузка.
А в элементе body определен элемент , в который собственно и будет загружаться приложение.
Определение конфигурации
Поскольку для определения кода приложения применяется язык TypeScript, поэтому также создадим в корневой папке проекта новый файл tsconfig.json :
< "compileOnSave": false, "compilerOptions": < "baseUrl": "./", "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "module": "ES2022", "moduleResolution": "node", "target": "ES2022", "typeRoots": [ "node_modules/@types" ], "lib": [ "ES2022", "dom" ] >, "files": [ "src/main.ts" ], "include": [ "src/**/*.d.ts"] >
Данный файл определяет настройки для компилятора TypeScript. Опция «compilerOptions» устанавливает параметры компиляции. А опция «files» определяет компилируемые файлы. В нашем случае это файл приложения — main.ts, который подтягивает все остальные файлы приложения.
Angular.json
Для компиляции приложения мы будем использовать Angular CLI, поэтому нам надо описать поведение CLI с помощью файла angular.json. Итак, добавим в корневую папку проекта новый файл angular.json и определим в нем следующее содержимое:
< "version": 1, "projects": < "helloapp": < "projectType": "application", "root": "", "sourceRoot": "src", "architect": < "build": < "builder": "@angular-devkit/build-angular:browser", "options": < "outputPath": "dist/helloapp", "index": "src/index.html", "main": "src/main.ts", "polyfills": ["zone.js"], "tsConfig": "tsconfig.json", "aot": true >>, "serve": < "builder": "@angular-devkit/build-angular:dev-server", "options": < "buildTarget": "helloapp:build" >> > > > >
Вкратце пройдемся по структуре файле. Вначале определяется параметр version . Он определяет версию конфигурации проекта.
Далее идет секция projects , которая определяет настройки для каждого проекта. В нашем случае у нас только один проект, который называется по названию каталога проекта — helloapp.
Проект определяет следующие опции:
- projectType : тип проекта. Значение «application» указывает, что проект будет представлять приложение, которое можно будет запускать в браузере
- root : указывает на папку файлов проекта относительно рабочей среды. Пустое значение соответствует корневой папке проекта, так как в данном случае рабочая среда и каталог проекта совпадают
- sourceRoot : определяет корневую папку файлов с исходным кодом. В нашем случае это папка src, где собственно определены все файлы приложения
- architect : задает настройки для построения проекта. В файле package.json определены команды build и serve , и для каждой из этих команд в секции architect заданы свои настройки. Для каждой команды задается параметр builder , который определяет инструмент для построения проекта. Так, для команды «build» задано значение «@angular-devkit/build-angular:browser» — данный билдер для построения использует сборщик пакетов webpack. А для команды «serve» задано значение «@angular-devkit/build-angular:dev-server» — данный билдер запускает веб-сервер и развертывает на нем скомпилированное приложение.
Параметр options задает параметры построения файлов. Для команды «build» здесь определены следующие опции:
- outputPath : путь, по которому будет публиковаться скомпилированное приложение
- index : путь к главной странице приложения
- main : путь к главному файлу приложения, где собственно запускается приложение Angular
- polyfills : путь к файлам полифилов, в качестке которого выступает «zone.js»
- tsConfig : путь к файлу конфигурации TypeScript
- aot : указывает, будет ли использоваться компиляция AOT (Ahead-Of-Time) (предварительная компиляция перед выполнением). В данном случае значение true означает, что она используется
Для команды «serve» указана только одна опцияя — buildTarget , которая содержит ссылку на конфигурацию для команды build — «helloapp:build». То есть по сути эта команда использует ту же конфигурацию, что и команда build.
Если мы используем TypeScript для работы с Angular и Angular CLI для компиляции, то эти файлы package.json, tsconfig.json и angular.json фактически будут присутствовать в каждом проекте. И их можно переносить из проекта в проект с минимальными изменениями. Например, в файле angular.json вместо названия проекта «helloapp» будет соответствующее название проекта. В файле package.json можно будет задать какие-то другие версии пакетов, если предыдущие версии устарели. Можно будет изменить название проекта, версию. Можно подправить настройки TypeScript или Angular CLI, но в целом общая организация будет той же.
В итоге у нас получится следующая структура проекта:
Запуск проекта
И теперь, когда все готово, мы можем запустить проект. Для этого в командной строке (терминале) перейдем к папке проекта с помощью команды cd и затем выполним команду ng serve :
C:\WINDOWS\system32>cd C:\angular\helloapp C:\angular\helloapp>ng serve --open
Консольный вывод проинформирует нас, какие файлы какого размера созданы. Кроме того, мы сможем увидеть адрес, по которому запущен тестовый веб-сервер — по умолчанию это «http://localhost:4200/». Если мы передаем команде флаг —open , как в случае выше, то Angular CLI автоматически открывае браузер с запущенным приложением. И мы можем обратиться к приложению:
Введем в текстовое поле какое-нибудь имя, и оно тут же отобразится в заголовке.
Важно отметить, что пока приложение запущено, мы можем поменять код, и Angular CLI почти моментально перекомпилирует и перезапустит приложение.
Angular
Angular — это фреймворк от компании Google для создания продвинутых бесшовных (одностраничных) веб-приложений — SPA (Single Page Applications) — на языках программирования TypeScript, JavaScript, Dart.
Освойте профессию «Frontend-разработчик»
У фреймворка открытый исходный код. Продукт распространяется бесплатно. Найти исходные файлы и дополнительную информацию можно в официальном репозитории фреймворка на 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.
Профессия / 9 месяцев
Frontend-разработчик
Создавайте интерфейсы сервисов, которыми пользуются все
Устройство фреймворка Angular
Компоненты
Компоненты — это большие составные части приложения, не зависящие друг от друга. Например, один компонент — это лента новостей, другой — шапка сайта. Приложение строится из них, как из блоков. Обычно каждый компонент хранится в отдельном файле. Для него можно создать свои HTML-шаблон и CSS-стили. Они могут находиться в том же файле, что и компонент, а могут подключаться отдельно. Создается готовый блок интерфейса со структурой, стилями и определенной логикой поведения.
Модули
Это тоже составные части приложения, но другие. Они управляют компонентами. Если компонент — это область приложения, то модуль отвечает за управление ею. Точка входа в приложение, код для анимации или навигации — это всё модули.
Главный модуль есть в каждом проекте. Дополнительные добавляются по мере необходимости и выполняют конкретные задачи. Они нужны, чтобы не перегружать основной модуль лишней функциональностью и не делать его слишком громоздким.
Формы
Большинство приложений на Angular — form-based, то есть основанные на формах. Форма — это структура, в которую пользователь вводит какие-либо данные, а потом отправляет их на сервер. Блок для написания комментария или для обратной связи — это форма.
Angular делает работу с формами проще: их не приходится писать с нуля. Для них уже созданы шаблоны, которые нужно адаптировать под новую задачу.
Сервисы
Они похожи на компоненты, но более узкоспециализированные. Они могут определяться как на уровне модуля, так и на уровне компонента или приложения. В сервисах реализуется специальная логика. Они подключаются к приложению в качестве обычного класса и используются для хранения глобального состояния приложения. Также используются в качестве поставщика данных.
Директивы
Это составные части приложения, которые меняют структуру или поведение страницы. Компоненты тоже относятся к директивам. Но кроме них существуют еще два вида: структурные директивы и директивы, изменяющие внешний вид или поведение элементов. Они нужны, чтобы применить одно действие ко всем экземплярам одного компонента — например, изменение валюты во всех карточках товара.
Станьте Frontend-разработчиком
и создавайте интерфейсы сервисов, которыми пользуются все
Что необходимо для работы с Angular
Node.js
Это платформа для работы с JavaScript и TypeScript. Подробнее о ней можно прочитать в нашей статье. Node.js нужна для установки и запуска Angular.
Npm
Это пакетный менеджер, который позволяет с помощью одной команды скачать нужный пакет данных. С его помощью обычно устанавливают фреймворки и библиотеки. Его пакеты также требуются для нормальной работы 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:
npm install -g @angular/cli
CLI позволяет создавать и настраивать новые проекты, скачивать и устанавливать пакеты для каждого из них, собирать и развертывать приложения. Команды для CLI начинаются со слов ng.
Например, команда «Создать новое приложение» будет выглядеть как:
После этого можно ввести дополнительные флаги. А команда ng serve, выполненная из папки проекта, собирает и запускает приложение для отладки.
Коротко о главном
- Angular — фреймворк от Google для создания SPA-приложений на TypeScript, JavaScript, Dart с открытым исходным кодом.
- AngularJS — предыдущая версия фреймворка, написанная на JavaScript. Отличается от Angular.
- Компоненты — большие составные части приложения, модули — управляющие компоненты, формы — основа для ввода данных, сервисы — узкоспециализированные компоненты, директивы — составные части приложения.
- Для работы с Angular необходимы Node.js, Npm, TypeScript.
- Преимущества Angular: обилие возможностей, универсальное применение, подробный style guide, поддержка от Google.
- Недостатки Angular: сложность в изучении, отсутствие совместимости между старой и новой версиями.
- Начать работу с Angular рекомендуется с установки Angular CLI.
Frontend-разработчик
Научитесь создавать удобные и эффектные сайты, сервисы и приложения, которые нужны всем. Сегодня профессия на пике актуальности: в России 9000+ вакансий, где требуется знание JavaScript.
Статьи по теме:
Что такое Angular
Если посмотреть на вакансии фронтендеров, мы часто заметим там три слова: Angular, React и Vue. Это равнозначные технологии, которые одинаково популярны и различаются в деталях. Погружение в детали отнимает время, и поэтому обычно разработчики выбирают что-то одно — изучают то, что больше понравилось.
Сегодня мы познакомимся с Angular. Разберёмся, как устроена технология и что нужно знать для её изучения.
Angular — это фреймворк компании Google. Он нужен для разработки браузерных, десктопных и мобильных приложений — таких, где можно быстро и бесшовно перемещаться по сайту.
Что было до Angular и других SPA-фреймворков
Angular работает по принципу SPA, single-page application. Чтобы понять, что это такое, надо сначала понять, чем это не является.
Традиционный подход к веб-приложениям был примерно такой:
- Пользователь переходил на сайт.
- Браузер отправлял серверный запрос на поиск нужного адреса.
- Сервер находил страницу и передавал её на сайт.
- Пользователь смотрел на эту страницу и нажимал на какую-то ссылку.
- Браузер формировал повторный запрос, сервер собирал новую страницу и снова возвращал её на сайт. Цикл повторялся после каждого действия пользователя.
Это можно сравнить с заказом еды в ресторане, с той лишь разницей, что заказать можно только одно блюдо за один раз. Заказал салат, съел, только потом заказал горячее. Теперь сидишь ждёшь, пока тебе его принесут. Съел горячее — заказал чай. Ждёшь, пока вскипит чайник. Принесли чай — заказал десерт. Ждёшь, когда поднимутся коржи. Вот то же самое, только в тысячу раз быстрее.
Медленные сайты всех раздражали, и разработчики придумали SPA — сначала появилась технология, а затем Angular и другие инструменты для её реализации.
Что такое SPA, single-page application
Single-page application расшифровывается как «приложение на одной странице». Работает так:
- Пользователь переходит на сайт.
- Браузер отправляет серверный запрос.
- Сервер возвращает страницу по запрашиваемому URL-адресу.
- Пока пользователь находится на первой странице, сервер упаковывает и передаёт все остальные страницы в фоновом режиме.
- Когда пользователю нужно перейти на другую страницу, у него «в фоне» уже загружено всё необходимое.
�� Single-page означает, что сайт технически работает как бы на одной странице: там есть шапка, подвал, какое-то меню, а основное «мясо» страницы загружается динамически, в фоновом режиме, без участия пользователя. Самый наглядный пример такого приложения — это соцсеть VK: пока вы листаете ленту, вам могут написать сообщение, и оно появится на экране само, без необходимости перезагружать страницу.
Без SPA вам приходилось бы постоянно перезагружать страницу с сообщениями, чтобы понять, написали вам или нет. А с SPA всё происходит само.
Как устроен Angular: компоненты
Angular-приложения состоят из независимых элементов. Эти элементы называются компонентами, и у каждого компонента своё поведение.
Например, лента новостей — один компонент. Отвечает за отображение списка новостей на странице. Кнопка «Прочитать» — другой компонент. Отвечает за переход со страницы списка новостей к выбранной новости.
Обычно компонент программируют так, чтобы он отображал элемент на экране и выполнял какое-то действие. Компонент может реагировать на клик, сворачиваться, разворачиваться, скрываться, перебрасывать на другую страницу и так далее.
Компоненты подчиняются жизненным циклам — меняются и работают по нескольким запрограммированным сценариям. Возьмём ситуацию, когда мы переходим со страницы списка новостей к одной новости. В этом случае компонент «Лента новостей» уничтожается и при необходимости создаётся повторно. Жизненные циклы разгружают память и ускоряют приложение.
Как устроен Angular: модули
Все компоненты подключаются к главному или дополнительным модулям. Модули управляют компонентами. Главный модуль контролирует всё приложение, а дополнительные модули следят за работой отдельных элементов.
Дополнительных модулей много. Они выполняют узкую задачу, подчиняются основному модулю и нужны для его разгрузки — отвечают за навигацию, анимацию, хранилище компонентов, взаимосвязь с браузером и прочие действия.
Как устроен Angular: сервисы
Для сложных операций вместо компонентов используют сервисы. Они отвечают только за тот набор логических операций, для которых он предназначен.
Например, мы можем подключить сервис «Таблицы». Это поможет отслеживать страницы с большим количеством данных, которые после обновлений меняют содержимое сайта. Никаких других действий сервис «Таблицы» выполнять не будет.
Как устроен Angular: директивы
Иногда один компонент с одинаковой логикой используется в разных частях приложения. Например, если нажать на кнопку переключения валют и выбрать доллар, то возле всех цен на сайте должен появиться значок доллара.
Этот значок можно получить с помощью компонентов и директив. Компоненты проставлять долго — если на сайте 1 000 позиций с ценой, то возле всех нужен компонент со значком доллара. Директивы упрощают процесс — вы создаёте один новый блок, и он будет отвечать за значок доллара возле всех цен на сайте.
Как устроен Angular: формы
Практически в любом приложении есть формы с полями и кнопками — отправить, сохранить, оставить номер телефона и так далее. В Angular для этих форм не нужно продумывать логику и тратить время на разработку — достаточно выбрать блоки с подходящими формами и подключить их к главному модулю.
Как изучить Angular
Angular — это фреймворк для опытных фронтенд-разработчиков. Его не изучают на курсах программирования с нуля, потому что для коммерческой разработки нужные общие знания:
- HTML, CSS, JavaScript — база для запуска сайта.
- TypeScript — рекомендованный язык для Angular-приложений.
- Git и GitHub — инструменты хранения кода и командной работы.
- Пакетные менеджеры — технология установки программ и обновлений.
- Препроцессоры — синтаксис для упрощённого написания кода.
Требования к Angular-разработчикам периодически обновляются и публикуются на roadmap.sh. Ещё мы рекомендуем посетить madewithangular.com — это сайт с перечнем приложений и сервисов на Angular. Если не понравится результат, то вы не потратите время и выберете для обучения другой фреймворк — React или Vue.
Что дальше
Мы рассмотрели структуру и базовые возможности Angular. Чтобы узнать больше — посмотрите официальную документацию.