В настоящее время развитие фронтенд-технологий происходит впечатляюще быстро. Время от времени появляются новые JS-фреймворки и библиотеки, которые предлагают широкий спектр возможностей для создания продвинутых веб-приложений. Несмотря на то, что Angular уже в возрасте, это все еще отличный выбор для начала вашего приключения в веб-разработке. Использование языка TypeScript, архитектура, ориентированная на модули и компоненты, возможность использования библиотеки RxJS и механизма инъекции зависимостей - это его несомненные преимущества, которые вы обязательно заметите, работая в этом фреймворке. Однако, чтобы раскрыть все его преимущества (и недостатки 😛), необходимо начать с создания проекта, так что... давайте начнем!
Первое, что необходимо сделать, это загрузить IDE(интегрированную среду разработки). Это интегрированная среда разработки для создания, изменения и тестирования программного обеспечения - вы будете просто писать в ней код :) На рынке существует множество IDE, но некоторые из них наиболее популярны: Visual Studio Code, WebStorm, Sublime Text. Лично я работаю в Visual Studio Code, и именно она будет использоваться в этом руководстве. Без лишних слов, давайте продолжим.
Следующим шагом будет установка Node.js. Это открытая и кроссплатформенная среда выполнения JavaScript для создания масштабируемых веб-приложений. Она позволяет создавать приложения, используя один и тот же язык как на стороне браузера, так и на стороне сервера, что делает ее чрезвычайно популярной среди программистов, работающих в качестве Frontend-разработчиков. Вы можете скачать Node.js с этой страницы, а затем установить его. После успешной установки откройте терминал и введите команду, приведенную ниже:
После ввода этой команды в следующей строке должна появиться информация об установленной версии.
После успешной установки Node.js создайте папку и откройте ее в вашей IDE. Я создал папку "angular" на своем рабочем столе. Следующим шагом будет установка Angular CLI. Он позволяет легко создавать проекты, генерировать приложения, используя специальные, короткие команды.
После установки мы должны получить следующее сообщение:
Наконец, введите следующую команду в консоли:
Он спросит, хотите ли вы добавить маршрутизацию в ваш проект, и вы сможете выбрать таблицу стилей. В моем случае я решил использовать препроцессор SCSS и маршрутизацию Angular.
После успешного создания проекта перейдите в папку с проектом и введите приведенную ниже команду:
После успешной генерации проекта откройте браузер и введите адрес поиска: 'localhost: 4200'. Браузер должен перенаправить вас на вид вашего приложения:
И вуаля! Поздравляем, вы только что создали свой первый проект Angular :)
20.08.2023 18:21
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".
20.08.2023 17:46
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
19.08.2023 18:39
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.
19.08.2023 17:22
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!
18.08.2023 20:33
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.
14.08.2023 14:49
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.