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

RedDeveloper
18.03.2022 12:54
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 с этой страницы, а затем установить его. После успешной установки откройте терминал и введите команду, приведенную ниже:

Следующим шагом будет установка Nodejs Это открытая и кроссплатформенная среда

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

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

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

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

После успешной установки Nodejs создайте папку и откройте ее в вашей IDE Я создал папку

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

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

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

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

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

Он спросит хотите ли вы добавить маршрутизацию в ваш проект и вы сможете выбрать таблицу

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

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

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

После успешной генерации проекта откройте браузер и введите адрес поиска 'localhost

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

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?

20.08.2023 18:21

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

20.08.2023 17:46

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox

19.08.2023 18:39

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

19.08.2023 17:22

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!

Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️

18.08.2023 20:33

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.

Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL

14.08.2023 14:49

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.