Angular — популярный фреймворк для создания веб-приложений, разработанный командой Google. В этой статье мы рассмотрим основы работы с Angular и пройдемся по ключевым моментам, которые помогут вам начать использовать этот инструмент.
Установка и настройка
Прежде всего, убедитесь, что у вас установлен Node.js и пакетный менеджер npm. Если нет, скачайте и установите с официального сайта Node.js.
Далее, установим Angular CLI — инструмент командной строки, созданный для автоматизации процесса разработки. Выполните следующую команду:
npm install -g @angular/cli
Теперь вы можете создать новый проект с помощью команды:
ng new my-first-angular-app
Перейдите в папку с проектом и запустите локальный сервер:
cd my-first-angular-app
ng serve
Откройте браузер и введите адрес http://localhost:4200/. Вы увидите стартовую страницу вашего приложения на Angular.
Компоненты
Компоненты являются основными строительными блоками Angular-приложений. Каждый компонент состоит из трех файлов:
- HTML-шаблон (
*.component.html) — определяет структуру и вид компонента - Стилевой файл (
*.component.css) — определяет стили компонента - TypeScript-класс (
*.component.ts) — определяет логику компонента
Для создания нового компонента используйте команду:
ng generate component my-new-component
В результате будет создана папка my-new-component со всеми необходимыми файлами.
Теперь вы можете добавить свой компонент в шаблон другого компонента с помощью его селектора:
<app-my-new-component></app-my-new-component>
😉 Не забывайте, что компоненты можно переиспользовать и комбинировать для создания сложных интерфейсов.
Директивы
Angular предлагает два типа директив: структурные и атрибутные.
Структурные директивы изменяют структуру DOM, добавляя или удаляя элементы. Примеры структурных директив: *ngIf, *ngFor.
<div *ngIf="isVisible">Этот блок будет видимым, если значение isVisible равно true.</div>
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>
Атрибутные директивы изменяют внешний вид или поведение элемента. Пример атрибутной директивы: [ngStyle], [ngClass].
<button [ngStyle]="{'background-color': buttonColor}">Кнопка</button>
<div [ngClass]="{'active': isActive}">Этот блок будет иметь класс 'active', если значение isActive равно true.</div>
Сервисы и зависимости
Сервисы в Angular — это классы, предоставляющие общую функциональность, которую можно инжектировать в компоненты и другие сервисы. Сервисы используются для разделения логики и обеспечения модульности приложения.
Для создания сервиса воспользуйтесь командой:
ng generate service my-service
Затем, чтобы использовать сервис в компоненте, импортируйте его и добавьте в конструктор компонента:
import { MyService } from ‘./my-service.service’;
constructor(private myService: MyService) { }
Теперь вы можете использовать методы и свойства сервиса внутри компонента.
🚀 Вот и все! Теперь вы знаете основы работы с Angular и можете начать создавать свои веб-приложения. Удачи в обучении!
Добавить комментарий