Согласно опросу разработчиков 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 – самый простой способ научиться кодировать. Если вы хотите научиться создавать современный веб-сайт на профессиональном уровне, посетите наш курс по адаптивному веб-дизайну.