В настоящее время развитие фронтенд-технологий происходит впечатляюще быстро. Время от времени появляются новые 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 :)
03.02.2023 09:34
Tailwind CSS - единственный фреймворк, который, как я убедился, масштабируется в больших командах. Он легко настраивается, адаптируется к любому дизайну, а размер сборки просто крошечный.
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. Следуйте инструкциям, и вы готовы к работе!
02.02.2023 07:39
Отношения "многие ко многим" в Laravel могут быть немного сложными, но с помощью Eloquent ORM и его моделей мы можем сделать это с легкостью. В этой статье мы расскажем, как создавать и управлять отношениями "многие ко многим" в Laravel с помощью методов присоединения и отсоединения вместо...
02.02.2023 07:16
В большой кодовой базе с множеством различных компонентов классы, функции и константы могут иметь одинаковые имена. Это может привести к путанице и затруднить понимание того, на какой компонент ссылаются в том или ином контексте.
01.02.2023 11:27
Laravel - это PHP-фреймворк, разработанный для облегчения разработки веб-приложений. Laravel предоставляет различные функции, упрощающие разработку приложений, такие как маршрутизация, ORM (Object-Relational Mapping), шаблонизация и аутентификация. Laravel имеет архитектуру на основе...