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 :)

Как настроить Tailwind CSS с React.js и Next.js?
Как настроить Tailwind CSS с React.js и Next.js?

03.02.2023 09:34

Tailwind CSS - единственный фреймворк, который, как я убедился, масштабируется в больших командах. Он легко настраивается, адаптируется к любому дизайну, а размер сборки просто крошечный.

LeetCode запись решения 2536. Увеличение подматриц на единицу
LeetCode запись решения 2536. Увеличение подматриц на единицу

03.02.2023 08:15

Увеличение подматриц на единицу - LeetCode

Переключение светлых/темных тем
Переключение светлых/темных тем

02.02.2023 09:04

В Microsoft Training - Guided Project - Build a simple website with web pages, CSS files and JavaScript files, мы объясняем, как CSS можно использовать для установки светлых/темных стилей и добавления интерактивных функций с помощью JavaScript. Следуйте инструкциям, и вы готовы к работе!

Отношения "многие ко многим" в Laravel с методами присоединения и отсоединения
Отношения "многие ко многим" в Laravel с методами присоединения и отсоединения

02.02.2023 07:39

Отношения "многие ко многим" в Laravel могут быть немного сложными, но с помощью Eloquent ORM и его моделей мы можем сделать это с легкостью. В этой статье мы расскажем, как создавать и управлять отношениями "многие ко многим" в Laravel с помощью методов присоединения и отсоединения вместо...

В PHP
В PHP

02.02.2023 07:16

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

Карта дорог Беладжар PHP Laravel
Карта дорог Беладжар PHP Laravel

01.02.2023 11:27

Laravel - это PHP-фреймворк, разработанный для облегчения разработки веб-приложений. Laravel предоставляет различные функции, упрощающие разработку приложений, такие как маршрутизация, ORM (Object-Relational Mapping), шаблонизация и аутентификация. Laravel имеет архитектуру на основе...