Установка Angular на Windows

Архив ‘Программирование’ рубрика

Установка Angular на Windows

Установка Angular на Windows

Оглавление

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

Предисловие

Последние два месяца я промучился с задачей, на которую я смог найти в Интернете только косвенные ответы. Задача называлась так: «Как упаковать Angular в war и развернуть на Tomcat» (Angular 4 + Maven war + Tomcat). В итоге, меня ждала победа с этим страшным DevOps’ом и мне захотелось помочь тем, кто так же будет мучиться с этой проблемой.
Но, немного подумав, я решил, что стоит рассказать свой путь с самого начала, начиная с момента установки Angular на компьютер. Потом я отдельно рассмотрю deploy чистого Angular на Tomcat, а в самом конце поговорим уже о подготовки war-контейнера и размещении его на сервере с последующим развертыванием.

Что такое Angular?

Итак, для начала давайте разберем, что такое Angular. Немного перефразируем Вики в этом смысле:

Angular – это JavaScript фреймворк с открытым исходным кодом. Основная задача фреймворка – внедрение уже всем известного MVC для разработки браузерных приложений.

 

Установка Angular на Windows

Теперь перейдем непосредственно к тому как проходит установка Angular на Windows. Для установки Angular Вам понадобится NodeJS. NodeJS – это платформа, в задачу которой входит транслирование JavaScript’а в машинный код. Node – это не User-friendly GUI с кнопочками. К сожалению взаимодействие со средой осуществляется полностью через консоль Windows.

NodeJS official site

Для установки NodeJS нужно перейти в раздел Download официального сайта (ссылка ) и скачать msi-файл и запустить его после окончания загрузки.

Если у вас Windows 10, то Вы можете получить следующее предупреждение:

Предупреждение Windows о установке не из магазина

В данном случае нужно нажать ссылку в нижней части окна «Открыть параметры» и в открывшимся диалоговом окне, в разделе «Приложения и возможности», в группе «Установка приложений» выбрать нужный Вам пункт, разрешающий установку не из магазина (например, «Разрешить использование приложений из любого места»).

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

Теперь настало время проверить установку. Нажмите комбинацию клавиш Win + R, введите “cmd” в поле и нажмите Enter. Откроется консоль, в которой введите последовательно:

 

Если все установлено верно, то в консоли, сразу после введенных команд будут отображены текущие версии NodeJS и NPM. Напомню, что NPM – это специальный пакетный менеджер для управления зависимости. Ну и нам осталось сделать последнее — установить Angular CLI (собственно, это и есть установка Angular). Для этого все в том же терминальном (консольном) окне введем команду:

 

Установка займет какое-то время и весь ее процесс будет отображен в Вашем терминальном окне. Сразу после этого можно приступать к созданию Вашего первого проекта, но об это мы поговорим уже в следующей статье.

Вот собственно и все! Установка Angular на Windows закончена!

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

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

 

Оглавление

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

Предисловие

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

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

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

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

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

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

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

, где [имя] – имя вашего проекта. Кстати, ключевое слово test зарезервировано, говорю сразу. То есть, если мы хотим создать проект/приложение (кто как его называет) Angular, которое будет называться 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

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

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

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

webpack: Compiled successfully.

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

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

Angular Final Page

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