Запуск приложения Angular с помощью Angular CLI всего за пару минут

Запуск приложения Angular с помощью Angular CLI всего за пару минут

От автора: Angular — одна из самых популярных в мире сред Javascript для создания современного приложения. Angular создан и разработан Google и имеет огромную поддержку сообщества.

Начиная с Angular 2+, в проекте Angular требуются различные файлы конфигурации. Установка их вручную один за другим — пустая трата времени, это также довольно непросто.

Таким образом, Angular предлагает решение для всех настроек: Angular CLI . Мы можем начать разработку проекта Angular в течение нескольких минут с помощью Angular CLI.

Что такое Angular CLI?

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

Конфигурации, настройки среды

Создания компонентов, служб, системы маршрутизации

Запуска, тестирования и развертывания проекта

Установки сторонних библиотек, таких как Bootstrap, Sass и т. д. (с помощью Webpack )

и многого другого.

Angular CLI значительно экономит силы и время разработчиков. Вы можете посетить официальный сайт по ссылке ниже:

Официальный сайт Angular CLI

Как запустить приложение Angular с помощью CLI?

Если вы посетите официальный веб-сайт по приведенной ссылке, вы увидите, что там описаны некоторые команды. Вот 4 основных этапа запуска приложения Angular:

Установка Node Package Manager (NPM) (обязательное условие)

Установка Angular CLI

Создание приложения Angular с помощью CLI

Запуск приложения

Давайте рассмотрим их подробнее …

1. Установка NPM

Для Angular требуется установка в вашей системе Node.js (версия 8.x или 10.x). Если он у вас уже установлен, вы можете пропустить эту часть.

У Node есть Node Package Manager (NPM) , который нам нужен для установки Angular CLI и других программ (пакетов). Вы можете скачать NPM отсюда.

После завершения установки перейдите в терминал или командную строку Windows и введите node -v, чтобы проверить, какая версия у вас установлена:

В моей системе установлена версия 8.11.4

2. Установка Angular CLI

После того, как вы установили NPM, вы можете приступить к установке Angular CLI. Откройте терминал или командную строку и введите следующую команду:

npm install -g @angular/cli

ПРИМЕЧАНИЕ: если ваш Mac ограничивает установку, вы можете переключиться на суперпользователя с помощью команды sudo su и попробовать снова.

g обозначает глобальную установку . Мы включили это, чтобы позже использовать CLI в любом проекте Angular. После завершения установки введите ng -v, чтобы убедиться, что установка прошла успешно.

ng означает Angular, а -v — версия.

3. Создайте приложение Angular с помощью Angular CLI

Теперь вы можете установить приложение Angular с помощью CLI. Снова из терминала, сначала выберите путь к файлу для установки исходного кода. Я выберу в качестве местоположения рабочий стол с помощью команды cd Desktop, а затем введу следующую команду для установки Angular Project:

ng new my-first-app

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

Я выбрал Рабочий стол в качестве местоположения, а затем установил приложение

4. Запуск приложения

Angular поддерживает live сервер, поэтому вы можете автоматически видеть изменения в локальном браузере, не обновляя страницу. После успешной инициализации приложения Angular перейдите в папку проекта с помощью cd name-of-your-app. Если все в порядке, вы можете запустить приложение Angular с помощью следующей команды:

ng serve --open

Эта команда начнет обслуживать (запустит) ваше приложение Angular, а команда open автоматически откроет его в веб-браузере:

После того, как вы увидите это сообщение, откроется страница браузера с поздравлениями! Ваше первое приложение Angular работает на локальном хосте :)

Заключение

Итак, теперь вы лучше понимаете, что означают эти команды:

Команды на официальном сайте CLI

Сначала установите NPM

Установите Angular CLI

Создайте приложение через Angular CLI

Запустите приложение

Вот, как мы начинаем разработку приложения Angular с нуля. Angular CLI очень полезен для разработки приложений Angular. Однако иногда могут возникать непредвиденные проблемы / ошибки. Ну что ж, добро пожаловать в программирование :)

Не волнуйтесь, просто погуглите ошибку и попробуйте найти решение. Если вы все еще не можете решить эту проблему, напишите об этом в комментариях ниже, и мы попробуем вам помочь. Я надеюсь, что вы найдете эту статью полезной. Спасибо за ваше время!

Автор: Cem Eygi

Источник: https://codeburst.io/

Редакция: Команда webformyself.