Компоненты ключевая особенность Angular. Приложение строится из компонентов.
В директории app
создать папку нового компонента и файл (должен содержать .component
в имени), например: app/server/server.component.ts
Файл должен наследовать класс ServerComponent
и содержать декоратор:
import { Component } from '@angular/core';
@Component({
selector : 'app-server',
templateUrl : './server.component.html'
})
export class ServerComponent {
}
@Component()
- это декоратор компонента. Он отмечает, что класс является компонентом angular и содержит мета настройки. В файл app.modules.ts
нужно указать новый класс:
import { ServerComponent } from './server/server.component'; // <- импортируем новый класс
//...
@NgModule({
declarations: [
AppComponent,
ServerComponent // <- добавили в declarations
],
@NgModule()
- это декоратор модуля. Он может содержать следующие ключи:
index.html
главной страницы.Модули используются для организации приложения и расширения возможностей из подключаемых библиотек.
Создадим шаблон компонента app/server/server.component.html
Создадим демо данные в шаблоне:
<h3>I'am server component</h3>
Теперь можно подключить компонент в шаблоне приложения, в файле app.component.html
:
<app-server></app-server>
Синтаксис:
ng generate component #name#
или сокращенный вариант: ng g c #name#
опции (не создавать файл тестов): ng g c recipes --spec false
создать компонент в определенной папке: ng g c recipes/recipe-list
Запустим команды: сперва создадим компонент ng g c servers
, затем ng g c server
После выполнения данной команды сгенерируется компонент servers и server.
Теперь в шаблоне приложения app.component.html подключим компонент servers:
<h3>I'am in the AppComponent!
<hr>
<app-servers></app-servers>
А в шаблоне компонента servers app\servers\servers.component.html
подключим 2 компонента server
:
<app-server></app-server>
<app-server></app-server>
Компоненты могут быть вложены друг в друга. Это помогает создать удобную структуру проекта:
Angular применяется для создания одностраничных приложений - SPA (Single Page Applications). Angular создает рендер программы, в отличие от подхода, когда весь контент загружен в DOM, а JavaScript его меняет.
Разрешение динамических данных перед активацией роута и интерфейс Resolve в Angular
Работа с формами. Реактивный подход (Reactive).