
Содержание статьи
Согласно опросу разработчиков Stack Overflow за 2018 год, Angular является одной из популярнейших фреймворков/библиотек среди профессиональных разработчиков. Поэтому исследование этого существенно увеличивает ваши шансы получить работу веб-разработчика.
Вот почему мы объединились с одним из самых известных экспертов по фреймворкам и создали бесплатный курс Angular в Scrimba.
Инструктор Дэн Уолин – эксперт по разработчикам Google, который предоставляет услуги по обучению, архитектуре и разработке для некоторых крупнейших корпораций в отрасли и создал одни из самых популярных учебных курсов по Udemy и Pluralsight. Он также является постоянным докладчиком на конференциях разработчиков по всему миру.
В этом курсе Дэн проведет вас через создание вашей первой программы Angular с помощью TypeScript. Завершив курс, вы добавите ценные навыки к своему инструментальному поясу.
Теперь давайте посмотрим, как структурирован курс!
Часть №1: Обзор курса

Во вводном видео Дэн дает обзор курса, ключевых аспектов Angular и того, как организован курс. Он также расскажет вам немного о своем прошлом, чтобы вы с ним ознакомились, прежде чем перейти в код вашего нового приложения.
Часть №2: Обзор программы
В этой части Дэн дает нам представление о программе, которую мы собираемся создать. Она разработана, чтобы позволить нам сосредоточиться на ключевых строительных блоках Angular. Создав приложение для отображения данных клиентов и заказов, мы отточим ключевые аспекты Angular, такие как компоненты, модули, услуги и маршрутизация. Кроме того, во время курса мы узнаем о замечательных функциях, которые имеет каждое приложение, таких как сортировка и фильтрация.

Часть №3: Angular CLI
В этой части мы изучаем основы использования инструмента Angular CLI (интерфейс командной строки) и пройдемся по основным командам:
ng --version
ng --help
ng new my-app-name
ng generate [component | directive | pipe | service | class | interface | enum | guard]
ng build
ng serve
ng lint
ng tests
Например, ng --new my-app-name
создаст для нас новую пустую программу Angular, которую мы сможем использовать ng -generate
чтобы создать части нашего приложения.
ng build
построит все для нас, и ng serve -o
даже запустит сервер разработки, а также откроет окно обозревателя, чтобы мы могли просмотреть нашу программу.
Часть №4: Обзор файлов проекта
В этом видео курсе Дэн дает базовый обзор команды CLI для создания пустого приложения Angular и дает краткий обзор файлов конфигурации, таких как tslint
, tsconfig
и protractor
в нашей папке программы.
Часть №5: Большая картина
Здесь мы узнаем полезную абстракцию о том, что компоненты похожи на блоки Lego – мы создаем компоненты, а затем используем их, чтобы склеить вместе, чтобы создать приложение. Мы также получаем быстрое обновление семейства языков JavaScript и узнаем, где подходит TypeScripts.

Дэн дает нам хорошую ментальную модель, которую можно использовать для обдумывания нашего кода при работе с Angular, чтобы мы могли представить, где все это вписывается.
Часть №6: Компоненты и модули.
Не абстрагированный, диаграмма для кода Angular может выглядеть следующим образом.

Компоненты состоят из кода и шаблона HTML и могут иметь селектор, поэтому мы можем вызвать его в HTML.
<appcomponent></appcomponent>
Каждый компонент состоит из:

Затем Дэн объясняет, что такое каждая из частей и как они вписываются в способ разработки компонентов Angular. Одним из замечательных преимуществ Angular является то, что он очень предсказуем. Когда вы научитесь создавать свой первый компонент, вы уже на пути создания дополнительных компонентов.
Часть № 7: Компоненты и модули.
В этой части курса мы рассмотрим а HelloWorld
компонент.


Дэн разбирает каждый аспект компонента для нас и объясняет, как он используется и как наш компонент обрабатывается Angular, как он добавляется в app.module
и, наконец, как это отображается на наших экранах.
Мы этому учимся selector: 'app-root'
это то, что позволяет нам позже вызвать компонент из нашего HTML с помощью <app-root></app-root>
У нас также есть краткий обзор привязки данных, о котором мы узнаем больше в следующих разделах.
Часть № 8: Компоненты и модули – модуль программы
В этом ящике мы тратим больше времени на изучение внутренней работы. app.module
которых мы коснулись в предыдущем составе и узнали о них NgModule
и BrowserModule
.
Часть №9: Компоненты и модули — Добавление компонента Customers
В этом составе Дэн дает нам несколько советов по созданию компонентов с помощью CLI, а затем показывает, как создавать компоненты вручную. Мы узнаем, как структурировать компонент, расширяя наши знания из Части №6.

Теперь мы вводим некоторые данные, чтобы имитировать наш API и узнаем, как модули помогают нам организовать наш код и легче использовать его повторно.
Часть № 10: Компоненты и модули — Добавление компонента Список клиентов
В этой части мы создаем a customers-list.component
которая представляет собой таблицу HTML для отображения нашего списка клиентов. Быстро регистрируемся customers.module
и используйте<app-customers-list></app-customers-list>
селектор для отображения нашей пустой таблицы.

Следующим шагом будет заполнение таблицы некоторыми данными.
Часть № 11: Компоненты и модули — Добавление компонента текстового поля фильтра
Прежде чем добавить некоторые данные в нашу таблицу, Дэн показывает нам, как добавить a filter-textbox.component
к нашей таблице, и мы усиливаем способ Angular для создания компонента, регистрации его в модуле и использования в нашем HTML с селекторами.

Часть № 12: Компоненты и модули — Добавление общего модуля и интерфейсов
В этом разделе Дэн рассказывает об использованииshared.module
— модуль, к которому мы размещаем компоненты или другие функции, которыми мы хотим поделиться в нашей программе, а не только в ней customers
.
У нас также есть быстрое обновление интерфейсов TypeScript и того, как их можно использовать в приложениях Angular, чтобы обеспечить лучшую помощь в коде и повысить производительность.
export interface ICustomer {
id: number;
name: string;
city: string;
orderTotal?: number;
customerSince: any;
}
Часть № 13: Привязка данных — Обзор привязки данных
В этом разделе мы узнаем о привязке данных, узнаем несколько приемов и узнаем, как добавить привязку данных в нашу программу.
Обычно мы связываем данные в шаблонах. Привязка данных поступает в игру, когда компонент получает наши данные и подключает их к шаблону. Мы можем получить данные в шаблон с помощью Property Binding
обрабатывать события пользователя и получать данные из шаблона с помощью Event Binding
. Angular обеспечивает надежный и понятный способ добавления привязки данных в быстро запоминающиеся шаблоны.
Дэн предоставляет нам удобный слайд, чтобы запомнить необходимый синтаксис…

…и некоторые из директив Angular, например, ngFor
что используется для перебора элементов в коллекции и получения некоторых свойств из элементов и ngIf
чтобы добавить и удалить HTML элемент из DOM.
Часть № 14: Привязка данных — Начало работы с привязкой данных
В этом актерском составе мы играем Property Binding
и Event Binding
чтобы лучше понять, как они работают в Angular, используя знания из предыдущего раздела.
Дэн показывает, как мы можем использовать [hidden]
свойство для отображения an h1
элемент динамически:
<h1 [hidden]="!isVisible">{{ title }}</h1>
А чтобы привязать события DOM, например клик:
<button (click)="changeVisibility()">Show/Hide</button>
Часть № 15: Привязка данных – директивы и интерполяция
Здесь мы рассмотрим интерполяцию. Причина состоит в том, что нам нужно получить данные от каждого клиента, чтобы создать строчку таблицы в части 10.
Это та часть, когда все начинает сходиться: мы используем директиву ngFor
чтобы перейти к каждому клиенту filteredCustomers
и интерполировать данные клиента в строку таблицы. Мы узнаем несколько приемов по условному воспроизведению данных ngIf
.

В итоге мы получим хороший стол!

Часть № 16: Привязка данных — Привязка событий
Event Binding
имеет решающее значение, когда нам нужно обработать событие, например движение мыши или щелчок. В этом ящике Дэн поможет нам добавить функции для сортировки данных в нашей таблице. Мы начнем с этого в этой главе и закончим, когда перейдем в раздел «Службы» нашего курса.
Мы создаем обработчик событий-заполнитель в нашем customer-list.component
:
sort(prop: string) {
// A sorter service will handle the sorting
}
Добавьте привязку customers-list.component.html
:
<tr>
<th (click)="sort('name')">Name</th>
<th (click)="sort('city')">City</th>
<th (click)="sort('orderTotal')">Order Total</th>
</tr>
Часть № 17: Привязка данных — Свойства ввода
У нас есть некоторые данные в а people
массив в нашем customers.component
и нам нужно передать это в нашу filteredCustomers
массив в customers-list.component
эффективная передача данных от родительского компонента к дочернему.
Для этого мы будем использовать Angular Input
свойство, которое полагается на декоратор с именем Input():
@Input() get customers(): ICustomer[] {
return this._customers
}
set customers(value: ICustomer[]) {
if (value) {
this.filteredCustomers = this._customers = value;
this.calculateOrders();
}
}
И свяжитесь с ним в нашем шаблоне родительского компонента, чтобы передавать данные от родительского к дочернему (в этом случае app-customers-list):
<app-customers-list [customers]="people"></app-customers-list>
Часть № 18: Привязка данных – работа с каналами
Вот Да! Пока у нас получилось довольно хорошо!

Есть несколько вещей, которые могут выглядеть немного странно – john – это нижний регистр, и у нас нет символа «$» для отображения валюты, в которой у нас есть наши заказы.
Это действительно то, как у нас есть наши данные, поэтому мы можем просто пойти и обновить их напрямую, или мы можем использовать встроенную функцию Angular под названием Pipes, чтобы обновить их за нас!
Некоторые из самых простых труб выглядят так:
{{ cust.name | uppercase }} // renders JOHN
{{ cust.name | titlecase }} // renders John
Но иногда вы можете захотеть иметь собственную кастомную трубу, и Дэн покажет нам, как построить кастом capitalize
pipe (обратите внимание, что Angular включает в себя один из названныхtitlecase
— но мы здесь учимся!) и как подключить его к использованию в нашей программе.
Часть №19: Привязка данных — Добавление фильтрации
В этом актерском составе Дэн рассказывает нам о добавлении функциональных возможностей filter-textbox.component
из части №11
Мы узнаем больше о Angular Output
и EventEmitter
свойства, создайте наш обработчик событий фильтра и привяжите его к текстовому полю фильтра:
<filter-textbox (changed)="filter($event)"></filter-textbox>
Теперь мы можем фильтровать имена наших клиентов!

Часть № 20: Службы и HTTP — Обзор услуг
В этой главе мы рассмотрим службы Angular. Одной из сильных сторон Angular является полная структура, которая обеспечивает встроенную поддержку для управления состоянием и объектами с помощью служб. Раньше мы видели услуги на схеме. Поскольку мы не хотим, чтобы компоненты умели делать слишком многое, мы будем полагаться на службы для связи с сервером, выполнение проверки или вычислений на стороне клиента и т.д.

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

Часть № 21: Службы и HTTP – создание и предоставление услуги
С предыдущей главы мы видели импорт Injectible
который является декоратором, позволяющим использовать что-то, что называется Dependency Injection или кратковременно DI (еще одна мощная функция, встроенная в Angular).
Мы будем использовать DI для доступа к HttpClient
сервис, который мы будем использовать для связи со службой RESTful. Мы добавим HttpClient к конструктору нашему data.service
и @Injectible()
декоратор сделает DI возможным.

Часть № 22: Службы и HTTP — вызов сервера с помощью HttpClient
В этом актерском составе Дэн представляет Observables изRxJS
— реактивные расширения для JavaScript, не являющиеся частью Angular, но включенные во все проекты Angular по умолчанию.
Мы будем использовать Observables для работы с асинхронным кодом. Короче говоря, это позволяет нам начать операцию, а затем подписаться на возвращаемые данные. По возвращении данных с сервера подписка заканчивается, и мы можем отменить подписку.
Дэн обсуждает необходимый код для вызова сервера, а затем подписаться на ответ с помощью конвейеров и операторов RxJS.
Вот пример того, как мы можем получить заказ:

Часть № 23: Службы и HTTP – ввод службы в компонент
Теперь, когда у нас есть способ получить данные, нам нужно внедрить службу в один из наших компонентов. Теперь мы можем измениться this.people
в customers.component
от жесткого кодирования, чтобы вызвать службу и получить данные следующим образом.
Надо принести свое data.service
к app.module
а затем в customers.component
мы можем:
import { DataService } from '../core/data.service';
Теперь мы можем сделать инъекцию DataService
прямо в конструктор нашего компонента:
constructor(private dataService: DataService) {}
Часть № 24: Службы и Http — Подписка на Observable
Теперь мы можем использовать наше введенное dataService
звоните getCustomers()
и подписывайтесь на нашу Observable<ICustomer[]>
чтобы получить данные.
Что достаточно просто:
ngOnInit() {
this.title="Customers";
this.dataService.getCustomers()
.subscribe((customers: ICustomer[]) =>
this.people = customers);
Теперь у нас есть последняя служба.SorterService
Часть № 25: Службы и HTTP – использование SorterService
Если мы нажмем заголовки наших столбцов, ничего не произойдет.
Дэн удобно предоставил нам предварительно написанную услугу, которую мы можем использовать, поэтому в этой главе мы будем практиковать ввод службы в наши компоненты, в этом случае, customers-list.component
.
Как и с другими сервисами, нам нужно импортировать его:
import { SorterService } from '../../core/sorter.service';
Затем вводим инъекции SorterService
в наш конструктор:
constructor(private sorterService: SorterService) {}
Инъекция зависимости делает чрезвычайно простым доступ к повторно используемому коду, например к сортировщику или службам данных.
Наконец, мы используем его в наших sort()
функция:
sort(prop: string) {
this.sorterService.sort(this.filteredCustomers, prop);
}
Часть № 26: Маршрутизация — Обзор маршрутизации
В этом разделе будет представлена маршрутизация, являющаяся важной частью современных программ. Когда вы создаете программу Angular, вы хотите показывать разные компоненты, когда пользователь взаимодействует с ней. В нашем случае, когда пользователь нажимает Клиента, мы можем захотеть показать ему Заказ. Маршрутизация является одним из способов очень аккуратно достичь этого.
Маршруты используются для подключения определенного URL-адреса к компоненту и в следующих нескольких разделах мы сосредоточимся на верхней части нашей Angular диаграммы.

Прекрасная часть маршрутизации заключается в том, что если пользователь создает закладки к определенному URL-адресу, это возвращает их к определенному компоненту, и нет необходимости в сложной логике показа/скрытия.
Часть №27: Маршрутизация – создание модуля маршрутизации с маршрутами
Мы начинаем с привычной процедуры модуль-контейнер и создаем файл a app-routing.module
.
Основное внимание app-routing.module
заключается в определении маршрутов в массиве:
const routes: Routes = [
{ path: '', pathMatch: 'full', redirectTo: '/customers'},
{ path: '**', redirectTo: '/customers' }
];
Три ключевых свойства routes
есть:
path
— куда идет ваш пользователь, даpath: ''
будет корнем вашего приложения.path: '**'
есть матч с подстановкой. Обычно он размещается последней, и он там, чтобы охватить случаи для любого маршрута, который не указан вroutes
pathMatch
— как точно должен соответствовать маршрут для отображения определенного компонентаredirectTo
– когда путь совпадает, сюда мы отправляем пользователя. В нашем случае мы их присылаем в/customers
.
Часть № 28: Маршрутизация – использование розетки маршрутизатора
Чтобы использовать маршрутизацию в Angular в нашем app.component
шаблон заменяем <app-customers></app-customers>
с <router-outlet></router-outlet>
. В конце концов это лишь способ сказать: «Эй, сюда пойдет компонент, когда мы выйдем на наш маршрут».
Когда мы попадем на маршрут, вместо него волшебным образом появится компонент, связанный с этим маршрутом <router-outlet></router-outlet>
.
Часть №29: Маршрутизация – добавление модуля маршрутизации клиентов и маршрутов
В этом разделе Дэн объединяет все вещи, и мы соединяем a /customer
маршрут к customers.component
.
Сначала создаем acustomers-routing.module
и укажите наш маршрут от части №28 до customers.component
вот так:
const routes: Routes = [
{ path: 'customers', component: CustomersComponent }
];
А теперь, когда мы вводим «клиенты» в адресной строке браузера Scrimba мы получаем свое customers.component
.

Часть №30: Маршрутизация – добавление компонента заказа с маршрутами
В этом ролике мы собираемся быстро рассмотреть, как мы сделали маршрутизацию для отображения клиентов, и теперь пришло время маршрутизации, чтобы отобразить их заказы.
Хотя есть небольшая загвоздка. Когда мы нажимаем клиента, нам нужно отобразить данные заказа, связанные с этим клиентом. Поэтому нам нужно передать некоторые динамические данные в нашу маршрутизацию.
Мы можем достичь этого, передавая a route parameter
в нашем orders-routing.module
вот так:
const routes: Routes = [
{ path: 'orders/:id', component: OrdersComponent}
];
Обратите внимание на /:id
синтаксиса. В маршрутизации :
символ указывает, что значение после него будет динамически заменяться и id
это просто переменная, поэтому она может быть любой :country
или :book
.
Часть №31: Маршрутизация — доступ к параметрам маршрута
В предыдущем скринкасте мы видели, как создавать orders/:id
маршрут и сейчас orders.component
это надо как-то схватить id
и отображать заказы, связанные с клиентами. Для этого нам нужно получить доступ к id
параметр маршрута.
Один из способов это сделать:
let id = this.route.paramMap.get('id');
Преимущество этого способа состоит в том, что мы можем подписаться. paramMap
и получать уведомления, когда входят любые данные id
изменения. Но нам это нужно только раз.
Мы можем использовать snapshot
для того:
let id = this.route.snapshot.paramMap.get('id')
snapshot
просто делает своеобразное мгновенное изображение вашего URL-адреса и предоставляет его вам, что идеально, ведь это то, что нам нужно в этой ситуации.
Но сейчас у нас проблема. Наши id
это строка, но получить заказ от нашего DataService
это должно быть число. Мы можем конвертировать его с помощью parseInt()
но Дэн учит нас аккуратному +
трюк:
let id = +this.route.snapshot.paramMap.get('id')
Теперь мы можем звонить DataService
чтобы получить заказ и предоставить его orders.component
.
Часть № 32: Маршрутизация — Ссылка на маршруты с помощью директивы routerLink
Последнее, что мы хотим сделать, это добавить ссылку на имя клиента, чтобы мы могли нажать его, чтобы увидеть их заказы.
В части №28 мы добавили <router-outlet></router-outlet
и теперь нам просто нужно сказать нашей программе, что мы хотим отразить orders.component
когда мы переходим к /orders/:id
.
Мы можем сделать это, добавив ссылку на имя нашего клиента customers-list.component.html
в строке, где мы сопоставляем все данные для отображения. Там у нас уже есть объект заказчика, потому мы можем просто пройти id
к нашему маршруту.
<a [routerLink]="['/orders', cust.id]">
{{ cust.name | capitalize }}
</a>
Теперь мы видим заказ!

Но как нам возвратиться? Мы могли бы нажать кнопку «Назад» в браузере, но гораздо лучше иметь ссылку на программу для этого, поскольку мы знаем маршрутизацию. Добавим это к customers-list.component.html
в самом дне.
<a routerLink="/customers">View All Customers</a>
Часть №33: Итог курса
Отлично, у нас сейчас есть наше приложение!
Мы можем подвести итоги и сделать краткий итог проделанной работы. Не забудьте посмотреть фактическую трансляцию курса, поскольку Дэн — отличный преподаватель, так что вы получите много удовольствия от процесса вместе с ним!
Спасибо, Дэн!

Если вы заинтересованы в том, чтобы быть в курсе передних и внутренних технологий, не забудьте подписаться на Дэна в Twitter!
Счастливого кодирования!
Спасибо, что прочли! Меня зовут Пер Борген, я соучредитель Scrimba – самый простой способ научиться кодировать. Если вы хотите научиться создавать современный веб-сайт на профессиональном уровне, посетите наш курс по адаптивному веб-дизайну.
