Angular CLI — мощный инструмент, упрощающий создание производительных JS-приложений. В этом небольшом руководстве для новичков попробуем разобраться для чего он нужен и как с ним работать.
Содержание:
1. Немного об Angular
2. Что такое Angular CLI?
3. Установка интерфейса командной строки
4. Hello Angular!
5. Архитектура Angular CLI
6. Как работает Angular CLI?
7. Чем отличается Angular CLI от AngularJS
Angular — фреймворк JavaScript, помогающий разработчикам создавать веб-приложения. Технически его можно использовать где угодно, но лучше всего он работает в нестандартных приложениях с данными, там, где нужна комплексная маршрутизация и анимация. Также на его основе создано множество игр и приложений с дополненной реальностью.
Angular CLI (cli – command-line interface) — это официальный интерфейс командной строки используемый в экосистеме Angular. Его цель — упростить создание высококачественных приложений. Проще говоря, это набор утилит для быстрого создания новых проектов, обновления существующего кода, добавления сторонних библиотек.
Начать работу с ним просто. Но для начала его нужно его установить.
Для того, чтобы использовать CLI на вашем компьютере, должна быть установлена последняя активная LTS-версия Node.js. Если у вас ее нет, скачать можно здесь.
Если вы работаете в среде Linux или MacOS, я рекомендую взглянуть на Node Version Manager (NVM) — инструмент, позволяющий легко переключаться между разными версиями Node.js на одном компьютере.
Чтобы проверить вашу локальную установку Node.js, запустите node -v в окне терминала и убедитесь, что отображаемая версия выше 10.9.
Node.js поставляется с npm — менеджером пакетов Node, который мы будем использовать для установки CLI на нашу машину. Для этого откройте окно терминала и выполните следующую команду:
npm install -g @angular/cli
После успешной установки, он будет доступен вам в виде исполняемого файла (ng) в командной строке.
Чтобы убедиться, что вы правильно установили CLI, выполните в терминале следующую команду:
ng version
Она выведет версию установленного вами Angular CLI, а также версии Node.js и текущей операционной системы. Теперь, после проделанных нами манипуляций, мы можем беспрепятственно продолжить его изучение!
Чтобы создать новый проект Angular, мы используем команду ng new:
ng new my-app
Вместе с проектом устанавливаются все зависимости, необходимые для разработки под Angular.
Теперь при помощи команды сd вы можете войти в каталог нашего приложения my-app и запустить созданный проект в браузере, выполнив следующую команду:
ng serve
Откройте localhost:4200 в своем любимом браузере, вы должны увидеть что-то вроде этого:
Поздравляю! Вы успешно разработали свое первое приложение Angular. Это все, что нужно для начала работы с Angular CLI.
Но в реальной жизни все гораздо сложнее, чем это тестовое приложение. Прежде чем переходить к реальным проектам, необходимо изучить наиболее распространенные команды по работе с CLI. Чтобы посмотреть, что из себя представляет каждая из них — введите флажок --help.
Это выведет описание каждой отдельной команды и аргументы, которые она принимает, также отобразит поддерживаемые параметры:
ng new --help
Как видите, команд очень много. Многие из них используют схожие аргументы, потому что решают однотипные задачи. Но не особо старайтесь все запоминать, а вместо этого сосредоточьтесь на идеологической модели Angular CLI, освойте ключевые команды и их параметры. Это поможет лучше понять логику фреймворка — почему некоторые из них работают так, а не иначе.
Чтобы понять архитектуру Angular, выясним два основных набора задач, которые он решает.
Начинаем ли мы с нуля и вручную создаем все необходимые файлы всякий раз, когда хотим начать новый проект, либо копипастим из существующего проекта? А может, обычно клонируем репозиторий, а затем удаляем ненужный код? В обоих случаях не обойтись без:
ng new
В полнофункциональном приложении Angular задействовано множество концепций: модули, компоненты, сервисы, директивы и пр. Чтобы сгенерировать весь необходимый код нужно прописать:
ng generate
Когда хотите добавить внешнюю структуру в свое приложение Angular, вы открываете документацию по этому фреймворку и следуете длинному списку скучных инструкций. Чтобы не повторять одно то же действие многократно — настройте свою библиотеку, выполнив одну команду:
ng add
Frontend развивается очень быстро и Angular тоже. Чтобы своевременно добавлять последние фичи и следить за обновлением системы, воспользуйтесь командой:
ng update
Все приведенные выше команды (ng new, ng generate, ng add, ng update) имеют нечто общее — они преобразуют кодовую базу: либо путем создания нового кода, либо путем изменения уже существующего. Эти команды называются командами схемы.
Перед отправкой кода в продакшн, необходимо его протестировать. Для веб-приложений обычно применяют модульные и сквозные тесты. Тестирование — непростой процесс. Но тут надо отметить, что самая сложная его часть — это настройка.
CLI любезно предоставляет нам для этих целей две команды:
ng test # for unit tests ng e2e # for end-to-end tests
Чтобы все разработчики в проекте следовали стандартам кодирования, предварительно настройте линтинг (анализ проблемных мест исходного кода):
ng lint
При разработке приложения нам не обязательно развертывать его на рабочем сервере каждый раз — это контрпродуктивно. Вместо этого лучше запустить наш код локально в браузере и мгновенно увидеть изменения:
ng serve
Мы пишем наши приложения Angular на TypeScript, но браузеры понимают только JavaScript. Поэтому код должен быть транслирован в JS и объединен в формат, понятный браузеру. Также позаботимся о размерах приложения. Для этого нам нужно немного встряхнуть наш код — оптимизировать и минимизировать:
ng build
Хотите легко развернуть свои приложения Angular на нужной вам платформе хостинга? CLI и тут поможет вам с помощью команды:
ng deploy
Все приведенные выше команды применяются в процессе разработки (ng serve, ng test, ng e2e, ng lint), сборки и развертывания (ng build, ng deploy). Называются они — Architect Commands.
Теперь, когда мы понимаем архитектуру Angular CLI, мы можем сосредоточиться на других не менее важных командах, для чего создадим новый Angular-проект с помощью Routing и Sass.
На этот раз мы включим маршрутизацию и применим препроцессор CSS.
ng new --routing --style=scss ultimate-app
Такая конструкция предлагает CLI использовать Sass, но вы можете выбрать less и stylus, все на ваше усмотрение. А еще выше мы настраиваем маршрутизацию.
--routing эквивалентно --routing=true. Точно так же вы можете использовать --no-routing для --routing=false. Все подобные параметры, принимающие логические значения, ведут себя одинаково.
Основные параметры ng new:
--routing: настраивать маршрутизацию или нет.--style: формат таблицы стилей при использовании препроцессора CSS.--prefix: префикс, используемый для селекторов компонентов и директив. По умолчанию это app.--create-application: здесь указываем, создавать начальное приложение Angular или нет. Установите для этого флага значение false, если вы планируете создавать несколько приложений Angular в одном репозитории.--minimal: создать минимальный проект без настройки модульного тестирования или для e2e-тестирования.--collection: используете эту опцию, чтобы подключить другой набор схем для генерации кода.Начинаем с команды:
ng serve --open
Команда ng serve включит веб-сервер, запускающий ваше приложение в режиме разработки. Внутри CLI используется функционал Webpack и Webpack Dev Server для компиляции вашего кода, с функцией перезагрузки в реальном времени. Это означает, что если вы измените какой-либо исходный файл, ваше Angular-приложение автоматически перезагрузится в браузере.
С флагом --open CLI автоматически откроет localhost:4200 в вашем браузере после завершения компиляции — это значение по умолчанию. Но иногда вам может понадобиться запустить ваше приложение на другом порту. Для этого вы используете такую опцию:
ng serve --port=4300
Основные параметры ng serve:
--open: нужно ли автоматически открывать приложение в браузере.--port: на каком порту обслуживать ваше приложение.--proxy-config: это самая важная опция serve и одна из наименее известных функций Angular CLI, которая позволяет настроить прокси для бэкэнда и перенаправить определенные HTTP-вызовы на другой порт (или другой сервер). Например, вы можете перенаправить все вызовы с localhost:4200/api на localhost:8080/api. Узнайте об этом более детально здесь.--ssl: разрешение обслуживать приложение по протоколу HTTPS.Когда у вас будет написан скелет приложения, вы захотите добавить в свой проект дополнительные функции и, следовательно, больше кода.
Для этого вы используете команду ng generate и передаете ей схему, которую хотите использовать для генерации кода. Схемы существует практически для каждой концепции Angular (сервисы, директивы, каналы и т. д):
ng generate <schematic>
Давайте посмотрим на эти команды в действии! Генерация загруженного модуля:
ng generate module team --route=teams --module=app
Модули играют решающую роль в приложении Angular. Официальное руководство по стилю рекомендует создавать один модуль для каждого связанного функционального блока, а интерфейс командной строки упрощает это.
Приведенная выше конструкция:
TeamModule.TeamModule внутри основного модуля маршрутизации — AppRoutingModule, связывая маршрут /teams с TeamModule.TeamComponent внутри TeamModule и связывает его с маршрутом /teams.Создание компонента:
/team-list --module=team --exportTeamListComponent внутри team/components каталога.TeamModule.exports, чтобы сделать доступным для любого импортирующего модуля TeamModule.Создание службы:
ng generate service team/services/team
TeamService внутри каталога team/services.ng lint, ng test, ng e2e
test запустит все наши модульные тесты в режиме просмотра. e2e с помощью Protractor:ng lint --fix
--fix попробует автоматически исправить любые ошибки линтинга.Чтобы создать наше приложение мы используем команду build, создающую так называемые артефакты сборки (по дефолту в корневой папке).
Иногда простое приложение весит около 15 МБ. Это связано с тем, что по умолчанию CLI создает нашу программу в режиме разработки, то есть без какой-либо оптимизации. Мы можем сказать Angular CLI собрать наше приложение в рабочем режиме, добавив флаг --prod.
ng build —prod
Такая сборка будет хорошо оптимизирована за счет:
В этом случае размер приложения будет не больше 1 МБ. А это уже намного лучше!
В сети можно встретить популярные вопросы новичков о разнице Angular CLI от AngularJS. Поэтому, чтобы расставить все точки, подытожим выше сказанное.
Как мы уже разобрались Angular-CLI — это интерфейс командной строки служащий для работы с приложением, для добавления туда нужного нам функционала и тестирования при помощи определенных команд.
AngularJS — это более старая версия (1.x) фреймворка Аngular, представляющая собой инфраструктуру с открытым исходным кодом для создания веб-приложений на основе JavaScript.
Как видно, это две совсем разные штуки, которые лучше не путать из-за общего слова Angular.
CLI — один из самых важных инструментов при разработке под Angular, его освоение поможет создавать более качественные приложения и сделает вас продвинутым фронтенд-разработчиком. В конце, как обычно, предлагаем несколько полезных видеороликов по этой теме:
Сегодня мы поговорим о том, как выбрать лучшие курсы Power BI в Украине, особенно для…
В 2023 году во всех крупнейших регионах конкуренция за вакансию выросла на 5–12%. Не исключением…
Unicorn Hunter/Talent Manager Лина Калиш создала бесплатный трекер поиска работы в Notion, систематизирующий все этапы…
Edtech-стартап Mate academy принял решение отправить своих работников в десятидневный отпуск – с 25 декабря…
Служба безопасности Украины задержала в Киеве 46-летнего программиста, который за деньги устанавливал шпионские программы и…
IT-специалист Джордан Катлер создал и выложил на Github подборку разнообразных ресурсов, которые помогут достичь уровня…