Angular: Создание нового проекта

В настоящее время развитие фронтенд-технологий происходит впечатляюще быстро. Время от времени появляются новые JS-фреймворки и библиотеки, которые предлагают широкий спектр возможностей для создания продвинутых веб-приложений. Несмотря на то, что Angular уже в возрасте, это все еще отличный выбор для начала вашего приключения в веб-разработке. Использование языка TypeScript, архитектура, ориентированная на модули и компоненты, возможность использования библиотеки RxJS и механизма инъекции зависимостей - это его несомненные преимущества, которые вы обязательно заметите, работая в этом фреймворке. Однако, чтобы раскрыть все его преимущества (и недостатки 😛), необходимо начать с создания проекта, так что... давайте начнем!

IDE

Первое, что необходимо сделать, это загрузить IDE(интегрированную среду разработки). Это интегрированная среда разработки для создания, изменения и тестирования программного обеспечения - вы будете просто писать в ней код :) На рынке существует множество IDE, но некоторые из них наиболее популярны: Visual Studio Code, WebStorm, Sublime Text. Лично я работаю в Visual Studio Code, и именно она будет использоваться в этом руководстве. Без лишних слов, давайте продолжим.

Node.js

Следующим шагом будет установка Node.js. Это открытая и кроссплатформенная среда выполнения JavaScript для создания масштабируемых веб-приложений. Она позволяет создавать приложения, используя один и тот же язык как на стороне браузера, так и на стороне сервера, что делает ее чрезвычайно популярной среди программистов, работающих в качестве Frontend-разработчиков. Вы можете скачать Node.js с этой страницы, а затем установить его. После успешной установки откройте терминал и введите команду, приведенную ниже:

После ввода этой команды в следующей строке должна появиться информация об установленной версии.

Создание проекта

После успешной установки Node.js создайте папку и откройте ее в вашей IDE. Я создал папку "angular" на своем рабочем столе. Следующим шагом будет установка Angular CLI. Он позволяет легко создавать проекты, генерировать приложения, используя специальные, короткие команды.

После установки мы должны получить следующее сообщение:

Наконец, введите следующую команду в консоли:

Он спросит, хотите ли вы добавить маршрутизацию в ваш проект, и вы сможете выбрать таблицу стилей. В моем случае я решил использовать препроцессор SCSS и маршрутизацию Angular.

После успешного создания проекта перейдите в папку с проектом и введите приведенную ниже команду:

После успешной генерации проекта откройте браузер и введите адрес поиска: 'localhost: 4200'. Браузер должен перенаправить вас на вид вашего приложения:

И вуаля! Поздравляем, вы только что создали свой первый проект Angular :)