Угловой! ранее известный как 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 и файловая структура проекта
