Angular 2 может похвастаться улучшенным языком, усовершенствованными инструментами и обобщенными передовыми практиками. Лукас Руббелке внимательнее.
Angular 2 уже здесь, и это новый дивный мир! Благодаря улучшениям языка, инструментам, новым функциям браузера и лучшим практикам, почерпнутым из AngularJS 1.X, он превратился из фреймворка, который предоставляет нам в основном разумный подход к созданию веб-приложений, в полнофункциональную платформу, которую мы можем использовать для таргетинга. все. Angular 2 полностью эволюционировал, а это означает, что у каждого будет хотя бы один - если не много - моментов дезориентации, когда они изучают фреймворк.
В этой статье мы проведем экскурсию по простому веб-сайту Angular 2 и познакомимся с компонентами Angular и их работой. Под капотом большинства механизмов Angular 2 находится ванильный класс ES6, в котором Angular использует метаданные для расширения класса со всеми его возможностями. Мы будем использовать метаданные компонента, чтобы сообщить Angular, как должен себя вести класс.
В этой статье мы остановимся только на самом главном. Загляните в репозиторий и на прилагаемый к нему скринкаст, чтобы узнать о сокровищнице дополнительных советов и приемов.
Корневой компонент
Самая важная тема в Angular 2 - это компоненты. Это основные строительные блоки, на которых построено все остальное. В результате зарождение каждого приложения Angular 2 - это его «корневой» компонент. В теле нашего основного HTML-файла мы начинаем с одного элемента app, который является точкой входа для нашего приложения. Все внутри этого тега видно, пока Angular не загрузится.
// index.html <body> <app>Loading…</app> </body>
Чтобы запустить приложение, мы импортируем метод bootstrap из пакета platform-browser-dynamic. Также импортируем корневой компонент. Затем мы вызываем метод bootstrap, передавая корневой компонент и массив поставщиков.
// boot.ts
import {bootstrap} from ‘@angular/platform-browserdynamic’;
import {AppComponent} from ‘./app.component’;
bootstrap(AppComponent, []);
Чтобы создать компонент, создайте класс TypeScript с именем AppComponent для представления компонента, а затем импортируйте класс Component из ядра Angular. Наконец, украсьте класс, добавив метаданные @Component и передав ему объект конфигурации.
Вы можете улучшить свой компонент, добавив к объекту config такие свойства, как selector (HTML-тег, представляющий компонент), шаблон и стили. Вы также можете указать массив поставщиков (например, услуг) и директив. Через мгновение мы повторим тот же процесс, когда создадим дочерний компонент.
Обратите внимание, что в Angular 2 считается лучшей практикой отдавать предпочтение мелкозернистым компонентам с одной конкретной задачей. Эмпирическое правило заключается в том, что вы достигли этого, когда ваш HTML-код достаточно мал, чтобы быть встроенным в декоратор, не будучи громоздким.
// app.component.ts
import {Component} from ‘@angular/core’;
@Component({
selector: ‘app’,
styles: [ h1 { text-align: center; } ],
template: <h1>Hello Angular 2!</h1>
})
export class AppComponent {}
Вы найдете рабочий пример в ветке «01 -gettingstarted» репозитория GitHub.
Дочерние компоненты
Давайте создадим домашний компонент. Первое, что мы собираемся сделать, это создать наш класс HomeComponent и установить свойства title и body. Мы также импортируем Component из @ angular / core, чтобы мы могли использовать его для украшения нашего нового класса буквально за мгновение.
// home.component.ts
import {Component} from ‘@angular/core’;
export class HomeComponent {
title: string = ‘Home Page’;
body: string = ‘This is the about home body’;
}
Мы собираемся улучшить наши метаданные Component с помощью селектора, который мы хотим использовать для нацеливания нашего компонента, пути к шаблону HTML и некоторого CSS для эстетических целей.
// home.component.ts
import {Component} from ‘@angular/core’;
@Component({
selector: ‘home’,
template: require(‘./home.component.html’),
styles: [
.content-card > .mdl-card__title {
color: #fff;
height: 176px;
background: url(‘../images/home-card.jpg’) center / cover;
}
]
})
export class HomeComponent {
title: string = ‘Home Page’;
body: string = ‘This is the about home body’;
}
Мы можем привязаться к любым общедоступным свойствам или методам в нашем классе TypeScript, поэтому в нашем файле home.component.html мы будем использовать интерполяцию строки фигурных скобок для визуализации нашего title и body.
// home.component.html
<div class=”content-card”>
<div class=”mdl-card__title”>
<h1>{{ title }}</h1>
</div>
<div>
{{ body }}
</div>
</div>
Мы можем повторить этот процесс для ItemsComponent и AboutComponent, а затем сделать все три наших недавно созданных дочерних компонента доступными для AppComponent, импортировав их и вводя их через массив директив в метаданных класса.
// app.component.ts
import {Component} from ‘@angular/core’;
import {AboutComponent} from ‘./about/about.component’;
import {ItemsComponent} from ‘./items/items.component.ts’;
import {HomeComponent} from ‘./home/home.component’;
@Component({
selector: 'app',
template: require('./app.component.html'),
styles: [require('./app.component.css')],
directives: [HomeComponent, AboutComponent,
ItemsComponent]
})
export class AppComponent {}
Компоненты Angular 2 по своей природе являются самодостаточными, поэтому, когда мы хотим отобразить их на странице, нам просто нужно добавить наши селекторы компонентов в разметку, как вы можете видеть ниже. Приятным побочным эффектом этой компонентно-управляемой архитектуры является то, что наш HTML теперь является DSL и очень хорошо описывает модель предметной области, в которой мы работаем.
// app.component.html <main> <div> <home></home> <about></about> <items></items> </div> </main>
Если вы посмотрите ветку репозитория «02 -components», вы увидите рабочий пример этого.
Маршрутизация
Создание группы компонентов и размещение их на странице интересно, но не обязательно отражает то, как мы создаем приложения в реальной жизни. Нам необходимо иметь возможность перемещаться между компонентами, как если бы они были страницами на веб-сайте, и мы можем использовать ComponentRouter для выполнения этой задачи.
Мы собираемся немного обновить наш файл boot.ts, импортировав ROUTER_PROVIDERS из пакета маршрутизатора Angular. Затем мы вставим ROUTER_PROVIDERS в массив поставщиков при вызове метода bootstrap.
// boot.ts
import {bootstrap} from ‘@angular/platform-browserdynamic’;
import {ROUTER_PROVIDERS} from ‘@angular/router’;
import {AppComponent} from ‘./app.component’;
bootstrap(AppComponent, [
ROUTER_PROVIDERS
]);
Поскольку это небольшое приложение, мы собираемся настроить наши маршруты в корневом компоненте. Мы начнем с импорта декоратора Routes и ROUTER_DIRECTIVES из пакета маршрутизатора Angular. Нам нужны ROUTER_DIRECTIVES, если мы хотим создавать ссылки на наши маршруты в нашем HTML.
//app.component.ts
import {Component} from ‘@angular/core’;
import {Routes, ROUTER_DIRECTIVES} from ‘@angular/
router’;
import {AboutComponent} from ‘./about/about.component’;
import {ItemsComponent} from ‘./items/items.component.ts’;
import {HomeComponent} from ‘./home/home.component’;
@Component({
selector: ‘app’,
template: require(‘./app.component.html’),
styles: [require(‘./app.component.css’)],
directives: [ROUTER_DIRECTIVES]
})
@Routes([
{path: ‘/’, component: HomeComponent},
{path: ‘/home’, component: HomeComponent},
{path: ‘/about’, component: AboutComponent},
{path: ‘/items’, component: ItemsComponent},
{path: ‘/*’, component: HomeComponent}
])
export class AppComponent {}
Затем мы украсим наш компонент приложения некоторыми дополнительными метаданными @Routes, которые содержат таблицу маршрутизации для нашего приложения. Базовый маршрут - это объект, состоящий из пути и компонента, на который указывает путь.
Вы заметили маршруты ‘/’ и ‘/ *’? Первый соответствует корневому URL-адресу приложения (http://example.com) и обслуживает HomeComponent, а второй соответствует любым незарегистрированным URL-адресам и обслуживает HomeComponent.
Теперь, когда наши маршруты настроены, мы можем обновить наши шаблоны, чтобы они ссылались на определенные маршруты. Чтобы связать зарегистрированный маршрут в HTML-коде компонента, мы поместим атрибут [routerLink] в тег привязки.
Значение должно быть массивом путей. В данном случае, поскольку у нас нет дополнительных параметров, нам нужен только один путь (который мы указали в оформлении @Routes).
// app.component.html <header> <div> <nav> <a [routerLink]=”[‘/home’]”>HOME</a> <a [routerLink]=”[‘/about’]”>ABOUT</a> <a [routerLink]=”[‘/items’]”>ITEMS</a> </nav> </div> </header> <main> <div> <router-outlet></router-outlet> </div> </main>
Если вы заглянете в ветку репозитория «03 -routes», вы увидите нашу таблицу маршрутизации в действии.
В заключение
Все сложные системы просто состоят из группы более мелких систем, которые работают вместе, чтобы произвести что-то впечатляющее. Angular 2 невероятно мощный, и из-за этого может казаться, что мы стоим у подножия утеса, пытаясь понять, как мы собираемся добраться до вершины.
Процесс становится гораздо менее пугающим, когда мы понимаем, что просто работаем с компонентами, которые можно исключить, используя простой процесс создания класса, импорта наших зависимостей, украшения нашего класса, улучшения нашего компонента и повторения с самого начала.
Лукас Руббелке - энтузиаст технологий и автор AngularJS в действии. Его любимое занятие - так же увлекать людей новыми технологиями, как и он сам.
Эта статья впервые появилась в 282-м выпуске сетевого журнала
