Как создать проект Angular

Оглавление

1. Как установить Angular, Node и NPM
2. Как создать проект Angular

Предисловие

Всем привет! В предыдущей статье  мы выполнили необходимые шаги для начала работы с Angular:

  • Установили node и npm;
  • Выполнили установку angular-cli.

Напомню еще раз, установка angular-cli выполняется следующей командой:

npm install -g @angular/cli

Сразу скажу, что основной интерфейс Ангуляра – командная строка, так что готовьтесь, времена DOS еще не ушли. С консолью придется работать много и возможно, это не совсем user-friendly, но зато наиболее простой и эффективный способ.

Итак, сегодняшняя наша задача – создать первый проект в Angular, который в следующей статье мы будем вручную устанавливать на сервер Apache Tomcat.

Как создать проект Angular?

Все очень просто. Для создания проекта введите в консоль windows:

ng new [имя]

, где [имя] – имя вашего проекта. Кстати, ключевое слово test зарезервировано, говорю сразу. То есть, если мы хотим создать проект/приложение (кто как его называет) Angular, которое будет называться myfirstproject, то такую команду и вводим в консоль:

ng new myfirstproject

Какое-то время займет загрузка нужных для проекта файлов:

Angular Cli intalling page 1

Окончательная установка закончится примерно следующим:

Angular Cli intalling page final

И в самом конце, если все завершилось успешно, будет примерно такой текст:

Installed packages for tooling via npm.
Successfully initialized git.
Project ‘myfirstproject’ successfully created.

Как видно, я запускал команду ng new…, находясь в папке Users – там же Angular (см. скриншот ниже) и создал папку с моим проектом. Для создании проекта в нужной Вам директории – либо просто перенесите эту папку в нужное место, либо сразу в терминальном окне с помощью команды DOS cd перейдите в нужную папку и там выполните ng new.

Angular project folder

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

Для того, чтобы запустить Ваше приложение, перейдите в папку с Вашим проектом, выполнив в терминале команду

Cd myfirstproject

После чего введите:

ng serve

После успешного выполнения в консоль будет выведено:

webpack: Compiled successfully.

После этого перейдите в браузер и вбейте в адресную строку — http://localhost:4200/.

Вашему взору предстанет первичная шаблонная страница Вашего проекта:

Angular Final Page

Вот собственно и все, что Вам нужно знать о том, как создать проект Angular.

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *