Руководство для начинающих по настройке приложения Angular и основам фреймворка Angular от Google.

Что такое Angular?

Angular — это фреймворк разработки приложений JavaScript, разработанный и поддерживаемый Google для разработки эффективных клиентских приложений.

Сначала он развертывается как библиотека AngularJS, а затем, начиная с версии 2 и выше, он рассматривается и разрабатывается как фреймворк. Итак, теперь мы получаем две разные вещи:

  • AngularJS
  • Угловая структура

В этом посте мы говорим о фреймворке Angular.

Это одна из важных частей приложений MEAN, где A относится к Angular. Подробнее об этом можно прочитать здесь.

История углового

Angular раньше был «золотым ребенком» среди фреймворков JavaScript, поскольку он был первоначально представлен Google в 2012 году. Он был построен на архитектуре MVC, которая представляет собой контроллер представления модели. Его часто называют Model-View-Whatever 😅

MVC – это концепция трехуровневой архитектуры, в которой основное внимание уделяется разделению модели (логика базы данных), представления (логика пользовательского интерфейса) и контроллера (общая бизнес-логика приложения).

Первая версия появилась как AngularJS и быстро стала очень популярной и возродила большую популярность. Тем не менее, его создатели решили вывести его на новый уровень и изначально назвали Angular 2. В 2016 году он был полностью переписан и переработан, и было введено много новых концепций. Это продолжалось до сих пор, и у нас есть Angular v13.x.x.

Угловой интерфейс командной строки

Интерфейс командной строки Angular используется для автоматизации основных операций, таких как настройка сред, запуск, тестирование проектов, а также установка сторонних библиотек и многое другое… в основном angular CLI — это менеджер для управления всеми аспектами, связанными с angular, из интерфейса командной строки.

Необходимые условия для изучения Angular

Прежде чем начать работу с angular, вы должны сначала изучить следующее.

  • JavaScript

JavaScript – это самый популярный язык в мире, который в основном используется для клиентской части, а благодаря Node.js его теперь можно использовать в качестве внутреннего языка программирования. Это легкий, интерпретируемый язык программирования, который легко освоить. Нажмите здесь, чтобы узнать об этом подробнее.

  • Машинопись

TypeScript — это надмножество JavaScript. Он добавляет в JS необязательные типы, поддерживающие крупномасштабные приложения JS для любого браузера. Он разработан Microsoft. Если вы знакомы с JavaScript, вам будет легко выучить машинописный текст с похожим синтаксисом. Его основная цель состояла в том, чтобы преодолеть недостатки JavaScript. Подробнее об этом можно узнать здесь.

  • HTML

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

  • CSS

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

Имея в виду следующее, мы можем перейти к настройке Angular в нашей локальной системе:

Шаги

  1. Установите Node.js и NPM (диспетчер пакетов Node)

Для Windows

  • Первый шаг — установить Node.js в вашу локальную систему, для этого нужно нажать здесь. Там вы увидите:

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

Нажмите «Далее», чтобы перейти к настройкам по умолчанию.

Для Linux (Ubuntu)

  • Во-первых, обновите свои пакеты с помощью:
sudo apt update
  • Теперь установите Node.js:
sudo apt install nodejs
  • Проверьте свою установку, используя:
node -v
  • Вы можете увидеть свою версию в моем случае:
v14.15.4
  • С Node.js вам нужно будет установить NPM (диспетчер пакетов Node):
sudo apt install npm

Для Windows и Linux

  • Вы должны проверить, правильно ли установлен NPM (диспетчер пакетов узла), который является частью Node.js в Windows. Вы можете проверить это с помощью:
npm -v
  • Вы можете увидеть свою версию в моем случае:
6.14.10

2. Установите Angular CLI.

Вы можете использовать Angular CLI для создания проектов, создания приложений и кодов библиотек, а также для выполнения множества текущих задач разработки, таких как тестирование, объединение и развертывание.

Чтобы установить его, вы можете использовать эту команду:

npm install -g @angular/cli

3. Создайте свое первое приложение Angular.

Запустите эту команду CLI, чтобы создать новое приложение для Angular:

ng new my-first-app

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

4. Запустите приложение

  • Измените свой каталог на каталог проекта:
cd my-first-app
  • Запустите эту команду:
ng serve --open

Команда ng serve запускает сервер. По умолчанию для вашего приложения будет использоваться порт 4200. Вы также можете изменить его, передав — port, то есть ng serve — port 4500. Опция --open (или просто -o) автоматически открывает ваш браузер на https://localhost:4200/, или вы можете перейти на it и увидеть свое первое приложение Angular.

Это начальный экран для вашего первого приложения Angular.

Завершение

Поздравляем 👏 с созданием вашего первого приложения Angular. Не стесняйтесь оставлять любые комментарии и предложения, так как это был мой первый пост на Medium. Вы можете попросить меня о любой услуге:



Джайкишан Кхемани — инженер по решениям — GAMMASTACK | LinkedIn
Просмотрите профиль Джейкишана Кхемани в LinkedIn, крупнейшем в мире профессиональном сообществе. У Джайкишана есть 3 вакансии…www.linkedin.com



Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.