Что такое Angular?¶

Эта тема поможет вам понять Angular: что такое Angular, какие преимущества он дает и чего можно ожидать, когда вы начнете создавать свои приложения.

Angular — это платформа разработки, построенная на TypeScript. Как платформа, Angular включает в себя:

компонентный фреймворк для создания масштабируемых веб-приложений
набор хорошо интегрированных библиотек, которые охватывают широкий спектр функций, включая маршрутизацию, управление формами, взаимодействие клиент-сервер и т.д.
Набор инструментов для разработчиков, которые помогут вам разрабатывать, собирать, тестировать и обновлять код.

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

Самое главное, что экосистема Angular состоит из разнообразной группы, включающей более 1,7 миллиона разработчиков, авторов библиотек и создателей контента.

Приложения Angular: Основные принципы¶

В этом разделе объясняются основные идеи, лежащие в основе Angular. Понимание этих идей поможет вам более эффективно проектировать и создавать приложения.

Компоненты¶

Компоненты — это строительные блоки, из которых состоит приложение. Компонент включает в себя класс TypeScript с декоратором @Component(), HTML-шаблон и стили.

Декоратор @Component() определяет следующую специфическую для Angular информацию:

CSS-селектор, определяющий, как компонент будет использоваться в шаблоне. HTML-элементы в шаблоне, соответствующие этому селектору, становятся экземплярами компонента.
HTML-шаблон, который указывает Angular, как отображать компонент.
Необязательный набор стилей CSS, определяющих внешний вид HTML-элементов шаблона.

Ниже приведен минимальный компонент Angular.

import { Component } from '@angular/core';

@Component({
    selector: 'hello-world',
    template: `
        <h2>Hello World</h2>
        <p>This is my first component!</p>
    `,
})
export class HelloWorldComponent {
    // The code in this class drives the component's behavior.
}

Чтобы использовать этот компонент, напишите в шаблоне следующее:

<hello-world></hello-world>

Когда Angular отображает этот компонент, результирующий DOM выглядит следующим образом:

<hello-world>
    <h2>Hello World</h2>
    <p>This is my first component!</p>
</hello-world>

Компонентная модель Angular обеспечивает сильную инкапсуляцию и интуитивно понятную структуру приложения. Компоненты также облегчают модульное тестирование вашего приложения и улучшают общую читабельность кода.

Более подробную информацию о том, что делать с компонентами, можно найти в разделе Обзор компонентов Angular.

Шаблоны¶

Каждый компонент имеет HTML-шаблон, который определяет способ отображения этого компонента. Вы определяете этот шаблон либо в строке, либо по пути к файлу.

Angular добавляет элементы синтаксиса, расширяющие HTML, чтобы вы могли вставлять динамические значения из вашего компонента. Angular автоматически обновляет рендеринг DOM при изменении состояния вашего компонента.

Одним из применений этой возможности является вставка динамического текста, как показано в следующем примере.

<p>{{ message }}</p>

Значение для message берется из класса компонента:

import { Component } from '@angular/core';

@Component({
    selector: 'hello-world-interpolation',
    templateUrl:
        './hello-world-interpolation.component.html',
})
export class HelloWorldInterpolationComponent {
    message = 'Hello, World!';
}

Когда приложение загружает компонент и его шаблон, пользователь видит следующее:

<p>Hello, World!</p>

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

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

<p [id]="sayHelloId" [style.color]="fontColor">
    You can set my color in the component!
</p>

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

Объявление слушателей событий для прослушивания и реагирования на действия пользователя, такие как нажатие клавиш, движение мыши, щелчки и прикосновения. Вы объявляете слушатель событий, указывая имя события в круглых скобках:

<button
    type="button"
    [disabled]="canClick"
    (click)="sayMessage()"
>
    Trigger alert message
</button>

В предыдущем примере вызывается метод, который определен в классе компонента:

sayMessage() {
  alert(this.message);
}

Ниже приведен комбинированный пример интерполяции, привязки свойств и привязки событий в шаблоне Angular:

hello-world-bindings.component.tshello-world-bindings.component.html

import { Component } from '@angular/core';

@Component({
    selector: 'hello-world-bindings',
    templateUrl: './hello-world-bindings.component.html',
})
export class HelloWorldBindingsComponent {
    fontColor = 'blue';
    sayHelloId = 1;
    canClick = false;
    message = 'Hello, World';

    sayMessage() {
        alert(this.message);
    }
}

<button
    type="button"
    [disabled]="canClick"
    (click)="sayMessage()"
>
    Trigger alert message
</button>

<p [id]="sayHelloId" [style.color]="fontColor">
    You can set my color in the component!
</p>

<p>My color is {{ fontColor }}</p>

Добавьте возможности в ваши шаблоны с помощью директив. Наиболее популярными директивами в Angular являются *ngIf и *ngFor. Используйте директивы для выполнения различных задач, например, для динамического изменения структуры DOM.

А также создавайте собственные пользовательские директивы для создания великолепного пользовательского опыта.

Следующий код является примером директивы *ngIf.

hello-world-ngif.component.tshello-world-ngif.component.html

import { Component } from '@angular/core';

@Component({
    selector: 'hello-world-ngif',
    templateUrl: './hello-world-ngif.component.html',
})
export class HelloWorldNgIfComponent {
    message = "I'm read only!";
    canEdit = false;

    onEditClick() {
        this.canEdit = !this.canEdit;
        if (this.canEdit) {
            this.message = 'You can edit me!';
        } else {
            this.message = "I'm read only!";
        }
    }
}

<h2>Hello World: ngIf!</h2>

<button type="button" (click)="onEditClick()">
    Make text editable!
</button>

<div *ngIf="canEdit; else noEdit">
    <p>You can edit the following paragraph.</p>
</div>

<ng-template #noEdit>
    <p>
        The following paragraph is read only. Try clicking
        the button!
    </p>
</ng-template>

<p [contentEditable]="canEdit">{{ message }}</p>

Декларативные шаблоны Angular позволяют четко отделить логику приложения от его представления. Шаблоны основаны на стандартном HTML, что упрощает их создание, поддержку и обновление.

Более подробную информацию о шаблонах смотрите в разделе Шаблоны.

Инъекция зависимостей¶

Инъекция зависимостей позволяет вам объявлять зависимости ваших классов TypeScript, не заботясь об их инстанцировании. Вместо этого Angular выполняет инстанцирование за вас.

Этот шаблон проектирования позволяет писать более тестируемый и гибкий код.

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

Чтобы проиллюстрировать, как работает внедрение зависимостей, рассмотрим следующий пример. Первый файл, logger.service.ts, определяет класс Logger.

Этот класс содержит функцию writeCount, которая записывает число в консоль.

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class Logger {
    writeCount(count: number) {
        console.warn(count);
    }
}

Далее в файле hello-world-di.component.ts определяется компонент Angular. Этот компонент содержит кнопку, которая использует функцию writeCount класса Logger.

Чтобы получить доступ к этой функции, служба Logger внедряется в класс HelloWorldDI путем добавления private logger: Logger в конструктор.

import { Component } from '@angular/core';
import { Logger } from '../logger.service';

@Component({
    selector: 'hello-world-di',
    templateUrl: './hello-world-di.component.html',
})
export class HelloWorldDependencyInjectionComponent {
    count = 0;

    constructor(private logger: Logger) {}

    onLogMe() {
        this.logger.writeCount(this.count);
        this.count++;
    }
}

Для получения дополнительной информации об инъекции зависимостей и Angular смотрите раздел Инъекция зависимостей в Angular.

Angular CLI¶

Angular CLI — это самый быстрый, простой и рекомендуемый способ разработки приложений Angular. Angular CLI делает некоторые задачи беспроблемными.

Например:

Команда	Подробности
`ng build`	Компилирует приложение Angular в выходной каталог.
`ng serve`	Собирает и обслуживает ваше приложение, перестраивая его при изменении файлов.
`ng generate`	Генерирует или изменяет файлы на основе схемы.
`ng test`	Запускает модульные тесты для данного проекта.
`ng e2e`	Собирает и обслуживает приложение Angular, затем запускает сквозные тесты.

Angular CLI — ценный инструмент для создания ваших приложений.

Сторонние библиотеки¶

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

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

Некоторые из доступных библиотек включают:

Библиотека	Подробности
Angular Router	Расширенная навигация и маршрутизация на стороне клиента на основе компонентов Angular. Поддерживает ленивую загрузку, вложенные маршруты, пользовательское сопоставление путей и многое другое.
Angular Forms	Единая система участия и проверки форм.
Angular HttpClient	Надежный HTTP-клиент, способный обеспечить более продвинутое взаимодействие клиент-сервер.
Angular Animations	Богатая система для управления анимацией на основе состояния приложения.
Angular PWA	Инструменты для создания прогрессивных веб-приложений \(PWA\), включая сервисный работник и манифест веб-приложения.
Angular Schematics	Автоматизированные инструменты для создания лесов, рефакторинга и обновления, которые упрощают разработку в больших масштабах.

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

Эти библиотеки необходимы только тогда, когда они могут помочь вам добавить функции в ваше приложение или решить конкретную проблему.

Следующие шаги¶

Эта тема дает вам краткий обзор того, что такое Angular, какие преимущества он предоставляет и чего ожидать, когда вы начнете создавать свои приложения.

Чтобы увидеть Angular в действии, посмотрите учебник Начало работы с Angular. В этом учебнике используется stackblitz.com, чтобы вы могли изучить рабочий пример Angular без каких-либо требований к установке.

Для дальнейшего изучения возможностей Angular рекомендуем следующие разделы:

28.02.2022