В основе Angular лежит компонентно-ориентированная архитектура. Все, что вы видите в приложении — кнопка, форма, целая страница — это компонент. Компонент — это автономный блок, объединяющий шаблон (HTML), стили (CSS) и логику (TypeScript класс). Первая ключевая концепция: декларативность. Вы описываете *что* должно отобразиться (шаблон с директивами), а фреймворк заботится о том, *как* это сделать (обновляет DOM). Это противоположность императивному подходу vanilla JavaScript, где вы вручную манипулируете элементами.
Для начала работы необходим Node.js и npm (менеджер пакетов). Установите Angular CLI (Command Line Interface) глобально — это ваш главный инструмент. Он создаст каркас проекта, сгенерирует компоненты, сервисы, запустит сервер для разработки и соберет приложение для продакшена. Команда `ng new my-first-app` создаст новое приложение со всей необходимой структурой: папки `src/app` для вашего кода, `node_modules` для зависимостей, конфигурационные файлы.
Откройте сгенерированный проект. Сердце приложения — файл `app.module.ts` (корневой модуль NgModule). Модули — это контейнеры, которые группируют связанные компоненты, директивы, пайпы и сервисы. В `@NgModule` вы объявляете (`declarations`) все компоненты, которые принадлежат этому модулю, импортируете (`imports`) другие модули (например, `BrowserModule` для работы в браузере, `FormsModule` для работы с формами) и указываете корневой компонент (`bootstrap`), с которого начинается отрисовка — обычно `AppComponent`.
Теперь взгляните на `app.component.ts`. Это TypeScript класс, украшенный декоратором `@Component`. Декораторы — это особый синтаксис, который добавляет метаданные к классам. Здесь указан селектор (`'app-root'`), который будет использоваться в HTML как тег ``, путь к шаблону и стилям. Класс содержит свойства и методы, которые становятся доступными в шаблоне. Например, свойство `title = 'my-first-app'` можно вывести в шаблоне с помощью интерполяции: `<h1>{{ title }}</h1>`.
Следующий критически важный концепт — привязка данных (Data Binding). Angular предоставляет несколько способов связи компонента и шаблона:
- Интерполяция `{{ value }}` для отображения свойств.
- Привязка свойства (Property Binding): `[disabled]="isDisabled"` для передачи данных в элемент или директиву.
- Привязка события (Event Binding): `(click)="onClick()"` для реакции на действия пользователя.
- Двусторонняя привязка (Two-way Binding): `[(ngModel)]="userName"` (требует `FormsModule`) для синхронизации значения в форме и свойстве компонента.
Жизненный цикл компонента управляется хуками — специальными методами в классе компонента, которые Angular вызывает в ключевые моменты: `ngOnInit` (инициализация), `ngOnChanges` (изменение входных свойств), `ngAfterViewInit` (после инициализации представления), `ngOnDestroy` (уничтожение). Использование `ngOnInit` для начальной загрузки данных — стандартная практика.
Сервисы и Dependency Injection (DI) — краеугольный камень архитектуры Angular. Сервис — это обычный TypeScript класс, предназначенный для вынесения бизнес-логики, работы с данными, HTTP-запросами, которые не относятся к представлению. Чтобы использовать сервис в компоненте, его необходимо *внедрить* в конструктор. Angular DI-система автоматически создаст экземпляр (или предоставит существующий синглтон) и передаст его. Это обеспечивает модульность и тестируемость кода. Например, `constructor(private dataService: DataService) {}`.
Работа с HTTP осуществляется через `HttpClientModule`. После его импорта вы можете инжектировать `HttpClient` в сервис и выполнять GET, POST, PUT, DELETE запросы к API. Обязательно обрабатывайте асинхронные операции с помощью Observables (библиотека RxJS). Подписка на Observable должна быть отменена в `ngOnDestroy`, чтобы избежать утечек памяти.
Маршрутизация (Routing) превращает одностраничное приложение (SPA) в многостраничное. Вы определяете маршруты в отдельном модуле (`AppRoutingModule`), сопоставляя путь с компонентом: `{ path: 'products', component: ProductsComponent }`. Для навигации используется директива `routerLink` в шаблоне и сервис `Router` в коде. Маршрутизатор отображает компонент в специальном месте шаблона — ``.
После изучения основ можно запустить приложение командой `ng serve`. Angular CLI развернет dev-сервер, скомпилирует приложение и откроет его в браузере. Для сборки в продакшен используется `ng build --prod`, который минифицирует код, применяет tree-shaking для удаления неиспользуемых модулей и создает оптимизированные бандлы.
Разбор Angular с нуля показывает, что его сложность — это плата за структурированность, поддерживаемость и мощность. Начиная с компонентов и привязки данных, через сервисы и DI, к маршрутизации и HTTP, вы поэтапно строите надежное приложение. Ключ к успеху — не пытаться выучить все сразу, а последовательно осваивать каждую концепцию на практике, используя мощь Angular CLI как надежного проводника.
Комментарии (6)