Автор оригинала: Per Harald Borgen.

Согласно Стек переполнения Разработчика Опрос 2018 , Угловой является одной из самых популярных каркасов/библиотек среди профессиональных разработчиков. Так что обучение это увеличивает ваши шансы на получение работы в качестве веб-разработчика значительно.

Вот почему мы объединились с одним из самых известных экспертов на рамках и создали Свободный угловой курс в Scrimba.

Инструктор Дэн Валин Является ли эксперт Google Developer, который предоставил услуги по подготовке, архитектуре и развитию для некоторых крупнейших корпораций в отрасли и создал некоторые из самых популярных учебных курсов по UDEMY и Pluralsight. Он также является постоянным докладчиком на конференциях разработчиков по всему миру.

В этом курсе , Дэн направляет вас через создание вашего самого первого углового приложения с помощью Tymdercript. Заполняя курс, вы добавите ценные навыки на ваш панель инструментов.

Теперь давайте посмотрим, как курс структурирован!

Часть № 1: Беглый взгляд на курс

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

Часть 2: Обзор приложений

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

Часть № 3: Угловая 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 Build построит все для нас, и NG служить -O Даже начнут сервер разработки, а также открыть окно браузера для нас, чтобы просмотреть наше приложение.

Часть № 4: Обзор файлов проекта

В этом видео курса DAN дает базовый обзор команды CLI для создания пустого углового приложения и дает быстрый обзор файлов конфигурации, таких как Цлинт , TSConfig а также транспортир В нашей папке приложения.

Часть № 5: Большая картинка

Здесь мы изучаем полезную абстракцию, которую компоненты аналогичны блокам LEGO – мы создаем компоненты, а затем используем их, чтобы придерживаться приложения. Мы также получаем быструю обложку на JavaScript Language Family и изучаем, где входят в типографы.

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

Часть № 6: Компоненты и модули – Обзор

Не теряется, диаграмма для углового кода может выглядеть так.

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

Каждый компонент состоит из:

Затем Дэн объясняет, что каждая из деталей, и как они вписываются в угловой способ разрабатывания компонентов. Одно из великих вещей о угловом углу это то, что это очень предсказуемо. После того, как вы узнаете, как создать свой первый компонент, вы хорошо у вас на пути к созданию дополнительных компонентов.

Часть № 7: Компоненты и модули – компонент приложения

В этой части курса мы смотрим на HellowOrld составная часть.

Дэн нарушает каждый аспект компонента для нас и объясняет, как он используется и как наш компонент обрабатывается угловым, как он добавляется в app.module. И в конечном итоге, как он оказывается на наших экранах.

Мы узнаем, что Селектор: «root root» это то, что позволяет нам позже позвонить компонент из нашего HTML, используя

У нас также есть Skyek Poek при привязке данных, которые мы узнаем больше о более поздних главах.

Часть № 8: Компоненты и модули – приложение модуль

На этом скринкасте мы проводим больше времени, узнав о внутренней работе app.module Что мы затронули в предыдущем отделении и узнали о NGModule. и Roundermodule Отказ

Часть № 9: Компоненты и модули – Добавление компонента клиентов

В этом отлив Дэн дает нам несколько советов по созданию компонентов с помощью CLI, а затем показывает, как создавать компоненты вручную. Мы узнаем, как структурировать компонент дальнейшего расширения наших знаний от части № 6.

Теперь мы приводим некоторые данные, чтобы имитировать нашу API и узнать о том, как модули помогают нам поддерживать наш код, организованный и легче повторно использовать.

Часть № 10: Компоненты и модули – Добавление компонента списка клиентов

В этой части мы создаем Клиенты-list.component Какая таблица HTML отображает наш список клиентов. Мы быстро регистрируемся в клиенты. Module и использовать Селектор для отображения нашей пустой таблицы.

Следующий шаг будет заполнять таблицу с некоторыми данными.

Часть № 11: Компоненты и модули – Добавление компонента TextBox фильтра

Прежде чем добавить некоторые данные в наш стол, Дэн показывает нам, как добавить Filter-TextBox.comPonent К нашему столу, и мы усиливаем угловой способ создания компонента, регистрируя его в модуле и используя его в нашем HTML с селекторами.

Часть № 12: Компоненты и модули – Добавление общих модулей и интерфейсов

В этом разделе Дэн рассказывает об использовании Shared.Module – Модуль, в котором мы помещаем компоненты или другие функции, которые мы хотим поделиться во всем нашем приложении, а не только в Клиенты Отказ

У нас также есть быстрый переподготовки к интерфейсам SpaceStry и о том, как их можно использовать в угловых приложениях, чтобы обеспечить лучшую помощь кода и повысить производительность.

export interface ICustomer {  
    id: number;  
    name: string;  
    city: string;  
    orderTotal?: number;  
    customerSince: any;  
}

Часть № 13: Привязка передачи данных – Обзор связывания данных

В этой главе мы узнаем о привязке данных, выучить несколько методов и посмотреть, как добавить привязку данных с нашим приложением.

Мы обычно связываем данные в наших шаблонах. Привязка данных входит в игру, когда компонент получает наши данные и подключает его в шаблон. Мы можем получить данные в шаблон, используя Обязательство недвижимости и обрабатывать события пользователя и получать данные из шаблона, используя Обязательство событий Отказ Angular обеспечивает надежный и чистый способ добавления привязки данных в шаблонах, которые быстро и легко запоминаются.

Дэн предоставляет нам удобный слайд, чтобы запомнить синтаксис требуется …

… а некоторые на угловых директивах, например, NGFOR Используется для петли через предметы в коллекции и получить некоторые свойства от предметов, а NGIF Чтобы добавить и удалить HTML-элемент из DOM.

Часть № 14: Привязка данных – Начало работы с привязкой данных

В этом литье мы играем вокруг Обязательство недвижимости и Обязательство событий Чтобы лучше понять, как они работают в угловании, используя знания из предыдущей главы.

Дэн показывает, как мы можем использовать [скрыто] Свойство для отображения H1 Элемент динамически:

{{ title }}

И связывать DOM-мероприятия, такие как нажмите:

Show/Hide

Часть № 15: Привязка передачи данных – Директивы и интерполяция

Здесь мы посмотрим на интерполяцию. Обоснование состоит в том, что нам нужно получить данные от каждого клиента, чтобы генерировать строку таблицы в таблице от части № 10.

Это часть, когда все начинает собираться вместе: мы используем директиву NGFOR Верить каждый клиент в FilteredCustomers и интерполировать данные от клиента в строку таблицы. Мы узнаем несколько трюков о рендере данных условно используя NGIF Отказ

В конце концов мы получаем красивый стол!

Часть № 16: Привязка передачи данных – Связывание события

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

Мы создаем обработчик событий заполнителей в нашем клиент-list.component :

sort(prop: string) {  
     // A sorter service will handle the sorting  
}

Добавить привязку в клиенты-list.component.html :

  
    Name  
    City  
    Order Total  

Часть № 17: Связывание данных – входные свойства

У нас есть некоторые данные в люди Массив в нашем Customers.Component И нам нужно передать его в нашу FilteredCustomers Массив в Клиенты-list.component эффективно передавать данные из родительского компонента ребенку.

Для этого мы будем использовать угловые Вход Свойство, которое опирается на декоратор по имени вход ():

@Input() get customers(): ICustomer[] {  
    return this._customers  
}

set customers(value: ICustomer[]) {  
     if (value) {  
     this.filteredCustomers = this._customers = value;  
     this.calculateOrders();  
     }  
}

И свяжитесь с ним в нашем родительском компонентном шаблоне для передачи данных от родителей к ребенку (список приложений-клиентов в этом случае):

Часть № 18: Привязка данных – Работа с трубами

Ух ты! Мы сделали довольно хорошо!

Есть несколько вещей, которые могут выглядеть немного нечетным – «Джон» – это строчный, и у нас нет символа «$» для отображения валюты, в которой у нас есть наши заказы.

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

Некоторые из простейших труб выглядят так:

{{ cust.name | uppercase }} // renders JOHN  
{{ cust.name | titlecase }} // renders John

Но иногда вы можете захотеть иметь собственную настраиваемую трубу, и Дэн показывает нам, как построить пользовательский капитализировать Труба (обратите внимание, что угловой включает в себя один под названием TitleCase – но мы изучаем здесь!) И как проволочать его, чтобы использовать в нашем приложении.

Часть № 19: Привязка данных – Добавление фильтрации

В этом отлив Дэн проводит нас через добавление функциональности нашим Filter-TextBox.comPonent от части № 11

Мы узнаем больше о угловом Выход и Eventemitter Свойства, создайте наш обработчик событий фильтра и свяжитесь с нашим фильтром TextBox:

И там мы идем, теперь мы можем фильтровать на именах наших клиентов!

Часть № 20: Услуги и HTTP – Обзор услуг

В этой главе мы смотрим на угловые услуги. Одной из сильных точек углов является то, что это полная структура, которая обеспечивает встроенную поддержку управления государством и объектами через услуги. Мы видели услуги на диаграмме раньше. Поскольку мы не хотим, чтобы компоненты знали, как сделать слишком много, мы полагаемся на услуги, чтобы обмениваться сервером, выполнять проверку или расчеты на стороне клиента и т. Д.

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

Это именно то, что делает сервис – некоторые многоразовые функциональные возможности для приложения, которые не должны иметь никакого беспокойства компонента.

К счастью, Дэн заставит нас пригодительным слайдем, чтобы иметь в виду.

Часть № 21: Услуги и HTTP – создание и предоставление услуг

Из главы ранее мы видели импорт Инъекция который является декоратором, который позволяет для чего-то называемого впрыска зависимости или Di для короткого (другая мощная функция встроена в угловой).

Мы будем использовать DI для доступа к Httpclient Сервис, который мы будем использовать для общения с спокойной службой. Мы будем добавлять httpclient для конструктора нашего data.service. и @Inectible () Декоратор сделает бы.

Часть № 22: Услуги и HTTP – вызов сервера с httpclient

В этом литье Дэн представляет наблюдаемые от RXJS – Реактивные расширения для JavaScript, который не является частью углового использования, а входит во все угловые проекты по умолчанию.

Мы будем использовать наблюдаемые, чтобы иметь дело с асинхронным кодом. В двух словах он позволяет начать операцию, а затем подписаться на возвращаемые данные. Как только данные вернутся с сервера, подписка заканчивается, и мы можем отписаться.

Дэн обсуждает необходимый код для вызова сервера, а затем подписаться на ответ с помощью RXJS-трубопроводов и операторов.

Вот пример того, как мы можем получить заказы:

Часть № 23: Услуги и HTTP – впрыскивая службу в компонент

Теперь, когда у нас есть способ получить данные, нам нужно ввести услугу в одну из наших компонентов. Теперь мы можем изменить Это. люди в Customers.Component. от жесткокодирования, чтобы позвонить в сервис и получить данные таким образом.

Нам нужно принести наши data.service к app.module. а потом в Customers.Component мы можем:

import { DataService } from '../core/data.service';

Теперь мы можем ввести наши DataService Прямо в конструктор нашего компонента:

constructor(private dataService: DataService) {}

Часть № 24: Услуги и HTTP – подписки на наблюдаемый

Теперь мы можем использовать наши вводные DataService , позвоните getCustomers () и подписаться на наш Наблюдаемый получить данные.

Который довольно простой:

ngOnInit() {  
    this.title = 'Customers';  
    this.dataService.getCustomers()  
        .subscribe((customers: ICustomer[]) =>  
        this.people = customers);

Теперь у нас есть одна последняя служба, чтобы посмотреть на – Сортировщик

Часть № 25: Услуги и HTTP – используя сортировку

В настоящее время, если мы нажмеем на наших заголовках столбцов, ничего не произойдет.

Дэн восьмо предоставил нам предварительный сервис для нас, что мы можем использовать, поэтому в этой главе мы будем практиковаться в приведении в наших компонентах, в этом случае Клиенты-list.component Отказ

Как и в случае других услуг, нам нужно импортировать его:

import { SorterService } from '../../core/sorter.service';

Тогда мы впрыскиваем Сортировщик услуг в наш конструктор:

constructor(private sorterService: SorterService) {}

Инъекция зависимостей делает его чрезвычайно простым для доступа к использованию многократного кода, такого как сортировщик или службы передачи данных.

Наконец, мы используем его в нашем Сортировать () Функция:

sort(prop: string) {  
    this.sorterService.sort(this.filteredCustomers, prop);  
}

Часть № 26: Маршрутизация – Обзор маршрутизации

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

Маршруты используются для подключения определенного URL к компоненту и в следующих нескольких главах мы будем сосредоточиться на верхней части нашей угловой диаграммы.

Супер большая часть маршрутизации заключается в том, что если пользователь закладки конкретный URL, он вернет их обратно к конкретному компоненту, и нет необходимости в комплексном шоу/скрытой логике.

Часть № 27: Маршрутизация – Создание модуля маршрутизации с маршрутами

Мы начинаем с знакомого модуля-контейнера и создании app-marting.module Отказ

Основное внимание app-marting.module это определить маршруты в массиве:

const routes: Routes = [  
    { path: '', pathMatch: 'full', redirectTo: '/customers'},  
    { path: '**', redirectTo: '/customers' }  
];

Три ключевых свойства маршруты находятся:

• путь – Где ваш пользователь идет, так Путь: '' будет корнем вашего приложения. Путь: «**» Является ли матч дикой карты. Обычно это помещается в последний раз И это там, чтобы покрыть случаи для любого маршрута, который не указан в маршруты
• Путь – Как именно должен отображаться соответствующий маршрут для определенного компонента
• RedirectTo – Когда путь соответствует, это где мы отправляем пользователя. В нашем случае мы отправляем их в /клиенты .

Часть № 28: Маршрутизация – Использование розетки маршрутизатора

Для того, чтобы использовать маршрутизацию в угловом угловании в нашем app.component Шаблон мы заменим с <Маршрутизатор-розетка> Отказ В конечном счете, это просто способ сказать: «Эй, вот где компонент пойдет, когда мы ударим наш маршрут».

Когда мы попали на маршрут, то компонент, связанный с этим маршрутом, волшебно появляется в месту <Маршрутизатор-розетка> Отказ

Часть № 29: Маршрутизация – Добавление модуля маршрутизации клиентов и маршруты

В этой главе Дэн объединяет все вещи, и мы подключаем /Клиент Маршрут в Customers.Component. .

Во-первых, мы создаем Клиенты-маршруты. Module И укажите наш маршрут из части № 28 до Customers.Component. вот так:

const routes: Routes = [  
    { path: 'customers', component: CustomersComponent }  
];

И теперь, когда мы введем «клиенты» В адресной строке браузера Scrimba Мы получаем наши Customers.Component Отказ

Часть № 30: Маршрутизация – Добавление компонента заказов с маршрутами

В этом клипе мы собираемся быстро рассмотреть, как мы сделали маршрутизацию для отображения клиентов, а теперь пришло время маршрутизации для отображения их заказов.

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

Мы можем достичь этого, передавая Маршрут Параметр в нашем заказы - маршрутизация. Module. вот так:

const routes: Routes = [  
    { path: 'orders/:id', component: OrdersComponent}  
];

Обратите внимание на /: ID синтаксис. В маршрутизации : Символ показывает, что значение после того, как он будет динамически заменен и ID это просто переменная, так что это может быть что-нибудь вроде : Страна или : книга Отказ

Часть № 31: Маршрутизация – Доступ к параметрам маршрута

На предыдущем скринковасте мы видели, как создать Заказы/: ID Маршрут и сейчас orders.component должен как-то захватить это ID и отобразить заказы, связанные с клиентами. Для этого нам нужно получить доступ к ID Маршрут Параметр.

Один из способов сделать это:

let id = this.route.paramMap.get('id');

Преимущество этого способа в том, что мы можем подписаться на параммап и получить уведомление, когда любой из данных в ID изменения. Но нам нужно только один раз.

Мы можем использовать Снимок для этого:

let id = this.route.snapshot.paramMap.get('id')

Снимок Просто берет момента мгновенной картины вашего URL и дает вам вам, что идеально подходит, как это то, что нам нужно в этой ситуации.

Но теперь у нас проблема. Наше ID это строка, но чтобы получить заказ у нашего DataService Это должно быть числом. Мы можем преобразовать это с Parсент () , но Дан учит нас аккуратно + обманывать:

let id = +this.route.snapshot.paramMap.get('id')

Теперь мы можем позвонить DataService Чтобы получить заказ и оказать его на orders.component. .

Часть № 32: маршрутизация – ссылка на маршруты с директивой RouterLink

Последнее, что мы хотим сделать, это добавить ссылку на имя клиента, поэтому мы можем нажать на него, чтобы увидеть их заказы.

В части № 28 мы добавили <Маршрутизатор-выход> И теперь нам просто нужно сказать наше приложение, которое мы хотим отображать orders.component. Когда мы перемещаемся к /orders/: id .

Мы можем сделать это, добавив ссылку на имя нашего клиента в клиенты-list.component.html В ряд, где мы отображаем все данные для отображения. У нас уже есть наш клиентский объект там, поэтому мы можем просто пройти ID на наш маршрут.

  
    {{ cust.name | capitalize }}  

Теперь мы можем увидеть заказы!

Но эй, как мы вернемся? Мы могли бы нажать кнопку «Назад» на браузере, но намного приятнее иметь приложение для этого, теперь, когда мы знаем маршрутизацию. Давайте добавим его в клиенты-list.component.html в самом дне.

View All Customers

Часть № 33: Резюме курса

Очень хорошо сделано, у нас сейчас наше приложение!

Мы можем завернуть и иметь быстрый отвод вещей, сделанных. Не забудьте посмотреть фактическое скринкасть по курсу, так как Дэн – отличный учитель, поэтому у вас будет много веселья, следующего за процессом рядом с ним!

Спасибо, Дэн!

Если вы заинтересованы в том, чтобы отставать от интерфейсных и задних технологий, убедитесь, что Следуйте Дэн в Twitter Действительно

Счастливое кодирование!

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

Оригинал: “https://www.freecodecamp.org/news/want-to-learn-angular-heres-our-free-33-part-course-by-dan-wahlin-fc2ff27ab451/”