Начало работы с Angular

Угловой! ранее известный как Angular JS, представляет собой фреймворк JavaScript (хотя и написанный в машинописных текстах), используемый для создания современных одностраничных приложений для Интернета, мобильных устройств или настольных компьютеров.

В этом разделе мы исследуем мир Angular, рассматривая фундаментальные концепции и мельчайшие детали фреймворка.

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

Предварительные требования

Чтобы настроить Angular для работы на нашем локальном компьютере , нам нужно, чтобы на нашем компьютере был установлен NodeJS. Мы также должны убедиться, что наша среда разработки включает Node.js и менеджер пакетов npm.

Node.js

Angular требует Node.js версии 8.x или 10.x.

Чтобы проверить свою версию, запустите node -v в окне терминала/консоли.

Чтобы получить Node.js, перейдите на nodejs.org.

npm (диспетчер пакетов узлов)

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

В этом кратком руководстве используется интерфейс командной строки клиента npm, который по умолчанию устанавливается вместе с Node.js.

Чтобы убедиться, что у вас установлен клиент npm, запустите npm -v в окне терминала/консоли

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

Angular CLI используется для создания проектов angular, генерации кода приложений и библиотеки и выполнения множества текущих задач разработки, таких как тестирование, комплектация и развертывание. Angular CLI может быть установлен как локально, так и глобально. Но часто рекомендуется установить его глобально, таким образом, чтобы установить Angular CLI глобально с помощью npm, откройте окно терминала/консоли и введите следующую команду:

  `npm install -g  @ angular/cli`  

Создание рабочей области и исходного приложения

Вы разрабатываете приложения в контексте Угловое рабочее пространство. Рабочее пространство содержит файлы для одного или нескольких проектов. Проект — это набор файлов, составляющих приложение, библиотеку или сквозные (e2e) тесты.

Чтобы создать новую рабочую область и исходный проект приложения:

Запустите команду CLI ng new и укажите имя my-app, как показано здесь:

  `ng new my-app`  

Команда `ng new` запрашивает информацию о функциях, которые следует включить в исходный проект приложения. Поскольку это наше первое приложение, примите значения по умолчанию, нажимая Enter/Return во всех запросах.

Angular CLI устанавливает необходимые пакеты Angular npm и другие зависимости. Это может занять несколько минут, в зависимости от вашего интернет-соединения..

Он также создает следующие файлы рабочего пространства и начального проекта:

  • Новое рабочее пространство с корневой папкой с именем my-app
  • Первоначальный проект скелета приложения, также называемый my-app (в подпапке src)
  • Проект сквозного тестирования (в подпапке e2e)
  • Связанные файлы конфигурации

Исходный проект приложения содержит простое приветственное приложение, готовое к запуску.

Обслуживание приложения

Angular включает сервер, так что вы можете легко создавать и обслуживать свое приложение локально, перейдя в папку рабочей области (my-app). Запустите сервер с помощью команды интерфейса командной строки ng serve с параметром —open.

  `cd my-app``ng serve --open`  

Команда ng serve запускает сервер, отслеживает ваши файлы и перестраивает приложение, когда вы вносите изменения в эти файлы.

—open (или просто -o) опция автоматически открывает в браузере адрес http://localhost: 4200. Приложение Angular по умолчанию использует порт 4200. В браузере отображается приветственное сообщение для мира Angular, как показано на изображении ниже

Отредактируйте свой первый компонент Angular

Компоненты — это фундаментальные строительные блоки приложений Angular. Они отображают данные на экране, слушают ввод пользователя и предпринимают действия на основе этого ввода.

Как часть исходного приложения, интерфейс командной строки создал для вас первый компонент Angular. Это корневой компонент, и он называется app-root.

Здесь мы собираемся отредактировать этот компонент, таким образом откройте ./src/app/app.component.ts и измените заголовок. свойство из my-app в «Ogbonna Vitalis, добро пожаловать в Angular». Здесь я использовал свое имя, вы можете изменить его на свое.

  @Component ({selector: 'app-root', templateUrl: './app.component.html'  , styleUrls: ['./app.component.css' visible})export class AppComponent {title =' Ogbonna Vitalis, Welcome to Angular ';}  

Браузер автоматически перезагружается с измененное название. Чтобы внешний вид выглядел намного лучше, нам нужно отредактировать файл CSS. Для этого мы открываем ./src/app/app.component.css и придаем компоненту стиль.

  src/app/app.component.csscontent_copyh1 {color: #  369;  семейство шрифтов: Arial, Helvetica, sans-serif;  font-size: 250%;}  

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

Далее:

рабочее пространство Angular и файловая структура проекта

Оцените статью
nanomode.ru
Добавить комментарий