Добро пожаловать в этот обзор курса Pluralsight Angular 2: Начало работы Деборы Курата.
Дебора — независимый дизайнер/разработчик программного обеспечения, специализирующийся на веб-разработке и разработке .NET с использованием AngularJS, C# и VB.NET.
Она 13 раз получала награду Microsoft Most Valuable Professional Award.
Курс использует Visual Studio Code в качестве редактора, но если вам нравится использовать Visual Studio 2015, ознакомьтесь с сообщением Деборы Angular 2 Начало работы с Visual Studio 2015.
Если у вас нет подписки на Pluralsight, вы обнаружите, что официальная документация по Angular 2 очень хороша, и пока вы не торопитесь, вы сможете ей следовать.
На самом деле я думаю, что одна из лучших особенностей Angular 2 заключается в том, что он имеет очень четкую и актуальную официальную документацию, потому что во многих программах с открытым исходным кодом очень не хватает качественной документации.
Связанные курсы и ресурсы
John Papa выпустил более короткий курс Pluralsight под названием Angular 2: First Look, и я также просмотрел его для вас.
Также скоро выйдет более подробный курс Angular 2 Fundamentals Pluralsight.
Альтернативное руководство по основным концепциям Angular 2, которое мне показалось полезным, принадлежит Виктору Савкину.
Angular 2 поддерживает такие старые браузеры, как Internet Explorer 9, но в основном предназначен для разработчиков, заинтересованных в программировании с использованием новейших технологий. Вот почему, как и в случае с React JS, мы склонны видеть, что наряду с ним используются новые технологии (такие как Babel для транспиляции из последнего кода ES 2015 в ES5).
Везде, где вы видите слово foo в примерах, замените его любым словом, которое вы хотите использовать. Там, где вы видите … это означает, что я пропустил часть кода для краткости, чтобы я мог выделить концепцию без беспорядка в коде.
Компоненты
Если вы заинтересованы в использовании веб-компонентов без использования Angular 2, ознакомьтесь с разделами Polymer и X-Tag.
Модули
Модули импортируются с использованием следующего TypeScript:
импортировать {Компонент} из ‘angular2/core’;
Некоторые распространенные модули angular2:
angular2/core
angular2/animate
angular2/http
angular2/router
Полную информацию о модульной системе см. в разделе Обзор архитектуры.
Первым шагом в создании приложения Angular 2 является создание файла index.html и написание кода для создания компонента приложения с открытым корнем.
Ваш первый компонент
Компонент состоит из шаблона, класса и метаданных. Здесь селектор — это метаданные, а шаблон — значение между обратными галочками:
@Component({
селектор: ‘my-app’
шаблон: `
Мой первый компонент
`
})
Это просто пример для начинающих. Обратные галочки — это новая функция ES 2015 для многострочных строк. Вместо жесткого кодирования всего html-кода вашего шаблона в виде строки вы можете указать html-файл в свойстве templateUrl.
Приложение реального слова также будет содержать некоторые директивы. Этот пример содержит код компонента в основном компоненте приложения:
app.component.ts
import { Component } from 'angular2/core';
import {FooComponent} from 'foo.component';
@Component({
selector: 'my-app'
template : `
Мой первый компонент
‹foo›‹/foo›`
директивы: [FooComponent]
})
export class AppComponent { }
foo.component.ts
@Component({
селектор: ‘foo’
шаблон: `foo.html`
})
экспортный класс FooComponent { }
index.html
‹body›‹foo›Загружается приложение Foo…‹/foo›‹/body›
Шаблонирование
Angular использует двойные фигурные скобки в стиле руля для определения выражений шаблона:
Шаблон:
{{foo}}
Класс:
экспортный класс FooComponent {
foo: string = ‘Ваше значение’;
}
Формально это называется интерполяцией.
Встроенные директивы
Есть несколько встроенных директив, которые позволяют вам добавлять логику в ваш html. Вы, наверное, уже догадались, что делают эти структурные директивы. Если вы раньше использовали ASP.NET MVC или Rails, это уже должно выглядеть знакомо:
‹table *ngIf='foo.length'›
‹thead›‹/thead›
‹tbody›
‹tr *ngFor='#foo of foos'›
‹ td›{{foo.fooName}}‹/td›
‹/tr›
‹/tbody›
‹/table›
# означает, что foo является локальной переменной (используется только в шаблоне).
Привязка свойств и событий
В качестве альтернативы шаблонным выражениям (интерполяция) вы можете выполнить привязку свойств следующим образом:
‹img [src]=’foo.imageUrl’›
Существует также такое связывание событий:
‹button (click)=’toggleImage()’›
Это вызывает указанный метод в компоненте:
экспортный класс FooComponent {
toggleImage(): void {
this.showImage = !this.showImage;
}
}
Пример приложения Деборы демонстрирует эффект отображения/скрытия
Двусторонняя привязка
Это позволяет другим элементам на экране немедленно обновляться, когда пользователь изменяет значение. Например, когда пользователь вводит значение в текстовое поле, оно отображает то же значение в другом месте экрана. Этого можно добиться с помощью директивы ngModel:
‹вход [(ngModel)]=’listFilter’/›
Итак, есть 4 способа привязки данных: интерполяция, привязка свойств, привязка событий и двусторонняя привязка.
Трубы
Любой, кто занимался программированием командной строки, например Power Shell, знает, что конвейеры предназначены для преобразования данных. Некоторые встроенные:
- Дата
- десятичный
- нижний регистр
- номер
- процентов
- валюта
- json
- кусочек
- верхний регистр
Вас также, вероятно, не удивит, что вы реализуете это с помощью символа вертикальной черты. Это преобразует foo.Name в нижний регистр:
{{ foo.Name | нижний регистр }}
Если встроенной трубы нет, вы можете создать свою собственную трубу. Вот пример:
импортировать {FooPipe} из ‘./foo.pipe’
@Component({
…
каналы: [FooPipe]
})
foo.pipe.ts
импортировать { PipeTransform, Pipe } из angular2/core;
@Pipe: ({
имя: ‘foo’
})
класс экспорта FooPipe реализует PipeTransform {
transform(…) { … }
foo.html
… | фу
Стили компонентов
В определении компонента вы можете определить встроенные стили или styleUrls. Определение встроенных стилей — ужасная идея. Вот пример установки styleUrl:
@Component({
selector: ‘foo’,
templateUrl: ‘foo.html’,
styleUrls: [‘foo.css’]
})
Крючки жизненного цикла
Это первое, что я нашел немного менее чем интуитивным. Вам просто нужно изучить синтаксис для этого. Вот некоторые интерфейсы, используемые для TypeScript, которые вам не понадобятся, если вы используете простой JavaScript:
OnInit выполняет инициализацию компонента. Он выполняет пользовательскую логику инициализации после того, как были инициализированы связанные с данными свойства вашей директивы.
OnChanges выполняет действие после изменения входных свойств
OnDestroy выполняет очистку компонентов
Вам нужно помнить об использовании ngOnInit и ngOnDestroy внутри определения вашего класса.
Вот живой пример на plunker, нажмите на app.ts, чтобы увидеть использование OnInit и OnDestroy.
Также см. Документация по интерфейсу OnInit
Вложенные компоненты
В курсе Деборы она показывает, как кодировать глификоны рейтинга продуктов, включая части значка звездочки. Я не видел этого раньше, и нашел это полезным.
star.component.html
При работе с этим примером мы видим 5 звездочек вместо 4 из-за того, что событие ngOnChanges не происходит.
ngOnChanges срабатывает только при изменении входных свойств.
Входные свойства предназначены для отправки информации из компонента-контейнера во вложенный компонент.
Свойства вывода предназначены для отправки информации из вложенного компонента обратно в компонент-контейнер.
star.component.ts
импортировать {… EventEmitter} из ‘angular2/core’;
@Компонент({…})
export class StarComponent {
@Input() rating: number;
starWidth: number;
@Output() notify: EventEmitter‹string› = new EventEmitter‹string›();
ngOnChanges(): void {this.starWidth…}
}
foo.component.html
‹td›
‹ai-star [rating]=’product.starRating’ (notify)=’onNotify($event)’›‹/ai-star›
‹/td›
Вердикт курса
Этот курс показался мне простым способом изучения Angular 2 с нуля. Чтобы узнать, как он соотносится с курсом Джона Папы, см. Angular 2: первый взгляд.
Дополнительная литература/ресурсы
"Быстрый старт"
Инструмент интерфейса командной строки
