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

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

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

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

Предпосылки

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

Node.js

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

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

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

npm (менеджер пакетов узлов)

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

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

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

Установите угловой CLI

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

`npm install -g @angular/cli`

Создать рабочее пространство и начальное приложение

Вы разрабатываете приложения в контексте рабочей области Angular. Рабочая область содержит файлы для одного или нескольких проектов. Проект - это набор файлов, которые включают приложение, библиотеку или сквозные (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). Запустите сервер с помощью команды CLI ng serve с параметром --open.

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

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

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

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

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

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

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

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

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

src/app/app.component.css
content_copyh1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

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