Angular - это популярный JavaScript-фреймворк для создания веб-приложений. Одной из ключевых особенностей Angular является его мощный интерфейс командной строки (CLI), который предоставляет ряд полезных инструментов для работы с проектами Angular. В этом блоге мы рассмотрим некоторые из наиболее часто используемых команд Angular CLI и то, как они могут помочь вам в разработке, тестировании и развертывании приложений Angular.
1. ng new
Команда ng new используется для создания нового проекта Angular. При выполнении этой команды Angular CLI запросит у вас несколько основных сведений о вашем проекте, таких как название и версия Angular, которую вы хотите использовать. Затем он создаст новый проект Angular с необходимыми файлами и каталогами.
Например, чтобы создать новый проект Angular под названием "my-project", вы можете использовать следующую команду:
ng new my-project
Это создаст новую директорию под названием my-project и сгенерирует необходимые файлы и директории для проекта Angular внутри этой директории. Они включают такие вещи, как корневой компонент, корневой модуль и необходимые файлы конфигурации.
Вы также можете использовать флаг --style, чтобы указать формат стиля, который вы хотите использовать для вашего проекта. Например, чтобы использовать Sass в качестве формата стиля, вы можете использовать следующую команду:
ng new my-project --style=sass
2. ng serve
Команда ng serve используется для локальной сборки и обслуживания приложения Angular. При выполнении этой команды Angular CLI создаст ваше приложение и запустит сервер разработки, который вы можете использовать для предварительного просмотра приложения в веб-браузере.
Например, чтобы собрать и обслужить проект Angular под названием "my-project", вы можете использовать следующую команду:
ng serve my-project
Это позволит собрать ваш проект Angular и запустить сервер разработки. Затем вы можете просмотреть ваше приложение в веб-браузере, перейдя по ссылке http://localhost:4200.
Вы также можете использовать флаг --open для автоматического открытия вашего приложения в веб-браузере при запуске сервера разработки, нацелившись командой на корневую папку проекта. Например:
ng serve --open
Вы также можете использовать флаг --host=192.234.124.XX для автоматического открытия приложения с указанным вами хостом при запуске приложения командой таргетинга в корневой папке проекта. Например:
ng serve --host=192.168.0.XX --open
Вы также можете использовать флаг --ssl=true для автоматического открытия вашего приложения на указанном вами хосте. Также вы можете отлаживать ваше приложение на мобильных и iPad устройствах, подключенных к сети.
ng serve --host=192.168.0.XX --ssl=true --open
Это особенно полезно, когда вы работаете над новой функцией и хотите быстро посмотреть, как она выглядит в браузере.
Команда ng serve - это важный инструмент для работы с проектами Angular. Она позволяет собирать и предварительно просматривать приложение локально, что очень важно для процесса разработки.
3. ng build
Команда ng build используется для создания готовой к производству версии вашего приложения Angular. Когда вы выполняете эту команду, Angular CLI компилирует ваше приложение и создает набор статических файлов, которые можно развернуть на веб-сервере.
Например, чтобы создать готовую к производству версию проекта Angular под названием "my-project", вы можете использовать следующую команду:
ng build my-project
Это скомпилирует ваш проект Angular и создаст набор статических файлов в каталоге dist. Эти статические файлы могут быть развернуты на веб-сервере, таком как Apache или Nginx, и использованы для предоставления вашего приложения пользователям.
Вы также можете использовать флаг --prod для создания готовой к производству версии вашего приложения с дополнительной оптимизацией. Например:
ng build my-project --prod
Вы также можете использовать больше флагов в команде ng build. пожалуйста, обратитесь к этой ссылке .
Это включает в себя такие вещи, как минификация, древовидный шейпинг и компиляция с опережением времени, которые могут помочь уменьшить размер вашего приложения и улучшить его производительность.
Команда ng build - это важный инструмент для развертывания приложений Angular. Она позволяет компилировать приложение и генерировать набор статических файлов, которые можно легко развернуть на веб-сервере.
4. ng test
Команда ng test используется для выполнения модульных тестов в приложении Angular. Она запускает тесты с помощью фреймворка тестирования Jasmine и бегуна тестирования Karma.
Вот пример того, как можно использовать ng test в проекте Angular:
ng test
Это выполнит модульные тесты в вашем проекте и отобразит результаты в окне терминала.
По умолчанию ng test работает в "сторожевом режиме", что означает, что он будет повторно запускать тесты всякий раз, когда вы вносите изменения в код. Вы можете отключить режим наблюдения, передав команде ng test флаг --no-watch.
Например:
ng test --no-watch
5. ng e2e
Команда ng e2e используется для запуска сквозных (E2E) тестов для вашего приложения Angular. Тесты E2E используются для проверки правильности работы вашего приложения с точки зрения пользователя. Они имитируют взаимодействие пользователя с вашим приложением и проверяют, что все работает так, как ожидается.
Для запуска E2E-тестов с помощью Angular CLI необходимо установить фреймворк для тестирования, например Protractor. Затем вы можете использовать команду ng e2e для запуска тестов и просмотра результатов в интерфейсе командной строки.
Например, чтобы запустить E2E-тесты для проекта Angular под названием "my-project", вы можете использовать следующую команду:
ng e2e my-project
Это запустит ваши тесты E2E и отобразит результаты в интерфейсе командной строки. Если какие-либо тесты окажутся неудачными, вы увидите сообщение об ошибке, указывающее, какой тест не прошел и почему.
Вы также можете использовать флаг --config, чтобы указать другой файл конфигурации для ваших тестов E2E. Например:
ng e2e my-project --config=protractor.conf.js
6. ng lint
Команда ng lint используется для проверки вашего приложения Angular на наличие ошибок кодирования и потенциальных проблем. Она делает это, прогоняя ваш код через линтер, который представляет собой инструмент, проверяющий ваш код на соответствие набору правил и стандартов.
Например, чтобы проверить проект Angular под названием "my-project" на наличие ошибок в коде, вы можете использовать следующую команду:
ng lint my-project
Это позволит прогнать ваш код через линтер и отобразить все ошибки и предупреждения в интерфейсе командной строки. Затем вы можете исправить эти ошибки, чтобы убедиться, что ваш код является последовательным и удобным для сопровождения.
Вы также можете использовать флаг --format, чтобы указать формат, в котором вы хотите отобразить результаты lint. Например:
ng lint my-project --format=json
7. ng generate
Команда ng generate, или сокращенно ng g, - это мощный инструмент в Angular CLI, который позволяет генерировать новые файлы и код для вашего проекта Angular. Это могут быть такие вещи, как компоненты, модули, трубы, сервисы и многое другое.
Например, если вы хотите создать новый компонент в вашем проекте Angular, вы можете использовать команду ng generate component и указать имя вашего компонента. Например:
ng generate component my-new-component
Это создаст новый каталог с именем my-new-component в каталоге src/app и сгенерирует следующие файлы:
src/app/my-new-component ├── my-new-component.component.html ├── my-new-component.component.css ├── my-new-component.component.ts └── my-new-component.component.spec.ts
Вы также можете использовать команду ng generate для генерации других типов файлов, таких как модули, трубы и сервисы. Например, вы можете использовать следующую команду для генерации нового сервиса:
ng generate service my-new-service
Это создаст новый файл с именем my-new-service.service.ts в каталоге src/app, и он будет содержать базовый класс сервиса с инжектируемым декоратором.
Команда ng generate - это удобный способ быстро создать новые файлы и код для вашего проекта Angular. Она экономит ваше время, генерируя необходимые файлы и код за вас, чтобы вы могли сосредоточиться на создании вашего приложения.
Также я всегда готов ответить на вопросы и предложить поддержку. Если у вас есть какие-либо вопросы или вы просто хотите пообщаться, вот LinkedIn
Хотите быть в курсе того, что мы делаем? Следите за нами на Instagram!
20.08.2023 18:21
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".
20.08.2023 17:46
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
19.08.2023 18:39
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.
19.08.2023 17:22
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!
18.08.2023 20:33
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.
14.08.2023 14:49
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.