在Angular專家Dan Wahlin的免費33部分課程中學習Angular

According to the Stack Overflow developer survey 2018, Angular is one of the most popular frameworks/libraries among professional developers. So learning it increases your chances of getting a job as a web developer significantly.

根據2018年Stack Overflow開發人員調查， Angular是專業開發人員中最受歡迎的框架/庫之一。因此，學習它會大大增加您獲得成為Web開發人員的工作的機會。

That’s why we’ve teamed up with one of the most renowned experts on the framework, and created a free Angular course at Scrimba.

這就是為什么我們與最著名的框架專家之一合作，并在Scrimba創建了免費的Angular課程。

Instructor Dan Wahlin is a Google Developer Expert who’s provided training, architecture, and development services for some of the biggest corporations in the industry and created some of the most popular training courses on Udemy and Pluralsight. He’s also a regular speaker at developer conferences around the world.

講師Dan Wahlin是Google開發人員專家，他為行業中一些最大的公司提供了培訓，架構和開發服務，并開設了一些有關Udemy和Pluralsight的最受歡迎的培訓課程。他還是全球開發者大會的定期發言人。

In this course, Dan guides you through creating your very first Angular app using TypeScript. By completing the course you’ll add valuable skills to your toolbelt.

在本課程中，Dan指導您使用TypeScript創建第一個Angular應用程序。通過完成課程，您將為工具帶增加寶貴的技能。

Now let’s have a look at how the course is structured!

現在讓我們看一下課程的結構！

第1部分：課程概述 (Part 1: Course overview)

In the introductory video, Dan gives an overview of the course, key aspects of Angular, and how the course is laid out. He also tells you a little bit about his background, so that you are familiar with him before jumping into the code of your new app.

在介紹性視頻中，Dan對該課程進行了概述，并介紹了Angular的關鍵方面以及課程的布置方式。他還向您介紹了他的背景知識，以便您熟悉他，然后再進入新應用程序的代碼。

第2部分：應用程序概述 (Part 2: Application Overview)

In this part, Dan gives us a glimpse into the app we’re going to build. It is designed to allow us to focus on the key building blocks of Angular. By creating an app to display customer data and their orders, we will hone in on the key aspects of Angular, such as Components, Modules, Services and Routing. Also, during the course, we will learn about great features every app has, like sorting and filtering.

在這一部分中，Dan讓我們瞥見了我們將要構建的應用程序。它旨在讓我們專注于Angular的關鍵構建基塊。通過創建一個顯示客戶數據及其訂單的應用程序，我們將深入了解Angular的關鍵方面，例如組件，模塊，服務和路由。此外，在課程中，我們將學習每個應用程序的出色功能，例如排序和過濾。

第3部分：Angular CLI (Part 3: Angular CLI)

In this part we learn the basics of using the Angular CLI (command-line interface) tool and walk through the basic commands:

在這一部分中，我們學習使用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

For example, ng --new my-app-name will create a new blank Angular app for us and we can use ng -generate to create parts of our app.

例如， ng --new my-app-name將為我們創建一個新的空白Angular應用程序，我們可以使用ng -generate來創建應用程序的各個部分。

ng build will build everything for us, and ng serve -o will even start a development server as well as open a browser window for us to view our app in.

ng build會為我們構建所有內容，而ng serve -o甚至會啟動開發服務器以及打開瀏覽器窗口供我們查看我們的應用程序。

第4部分：項目文件概述 (Part 4: Project Files Overview)

In this video of the course, Dan gives a basic overview of the CLI command for generating a blank Angular app and gives a quick overview of the configuration files like tslint, tsconfig and protractor in our app folder.

在本課程的視頻中，Dan對生成空白Angular應用程序的CLI命令進行了基本概述， tsconfig應用程序文件夾中的tslint ， tsconfig和protractor等配置文件進行了快速概述。

第五部分：大局 (Part 5: The Big Picture)

Here we learn a useful abstraction that Components are similar to Lego blocks?—?we build up components and then use them to stick together to make an app. We also get a quick refresher on JavaScript language family and learn where TypeScripts fits in.

在這里，我們學到了一個有用的抽象，即組件類似于Lego塊-我們構建了組件，然后使用它們粘在一起來制作應用程序。我們還將對JavaScript語言家族進行快速復習，并了解TypeScript的適用范圍。

Dan gives us a good mental model to use for thinking about our code while working with Angular so we can imagine where it all fits in.

Dan為我們提供了一個很好的思維模型，可用于在與Angular一起工作時考慮我們的代碼，以便我們可以想象所有這些都適合。

第6部分：組件和模塊—概述 (Part 6: Components & Modules?—?Overview)

Not abstracted away, the diagram for Angular code might look like this.

尚未抽象，Angular代碼圖可能看起來像這樣。

Components are made up of code and HTML template and it can have a selector, so we can call it in our HTML.

組件由代碼和HTML模板組成，并且可以具有選擇器，因此我們可以在HTML中對其進行調用。

<appcomponent></appcomponent>

Every Component consists of:

每個組件包括：

Dan then explains what each of the parts is and how they fit in the Angular way of developing components. One of the great things about Angular is that it’s very predictable. Once you learn how to create your first component you’re well on your way to creating additional components.

然后Dan解釋了每個零件是什么以及它們如何以Angular方式開發零件。 Angular的一大優點是它的可預測性。學習了如何創建第一個組件之后，就可以輕松創建其他組件了。

第7部分：組件和模塊-App組件 (Part 7: Components & Modules?—?App Component)

In this part of the course, we look at a HelloWorld component.

在本部分課程中，我們將介紹一個HelloWorld組件。

Dan breaks down every aspect of the component for us and explains how it’s used and how our component is processed by Angular, how it’s added to app.module and ultimately how it’s rendered on our screens.

Dan為我們分解了組件的各個方面，并解釋了如何使用它以及Angular如何處理我們的組件，如何將其添加到app.module以及最終如何在屏幕上呈現。

We learn that selector: 'app-root' is what allows us to later call the component from our HTML using <app-root></app-root>

我們了解到selector: 'app-root'是允許我們稍后使用<app-root></app-root>從HTML調用組件的功能

We also have a sneak peek at data binding which we’ll learn more about in later chapters.

我們還將先睹為快地介紹數據綁定，我們將在后面的章節中詳細了解。

第8部分：組件和模塊-App模塊 (Part 8: Components & Modules?—?App Module)

In this screencast, we spend more time learning about the inner workings of app.module which we touched on in the previous cast and learn about NgModule and BrowserModule.

在此截屏視頻中，我們花了更多時間來學習上app.module中涉及到的app.module的內部工作原理，并了解NgModule和BrowserModule 。

第9部分：組件和模塊-添加客戶組件 (Part 9: Components & Modules?—?Adding a Customers Component)

In this cast, Dan gives us some tips on creating components using the CLI and then shows how to create components manually. We learn how to structure a component further expanding on our knowledge from Part #6.

在此演員表中，Dan向我們提供了有關使用CLI創建組件的一些技巧，然后說明了如何手動創建組件。我們從第6部分開始學習如何根據我們的知識進一步擴展組件的結構。

Now we bring in some data to mimic our API and learn about how modules help us keep our code organized and easier to re-use.

現在，我們引入一些數據來模仿我們的API，并了解模塊如何幫助我們使代碼井井有條并易于重用。

第10部分：組件和模塊-添加客戶列表組件 (Part 10: Components & Modules?—?Adding a Customers List component)

In this part, we create a customers-list.component which is an HTML table to display our list of customers. We quickly register in customers.module and use the<app-customers-list></app-customers-list> selector to display our empty table.

在這一部分中，我們創建一個customers-list.component ，它是一個HTML表以顯示我們的客戶列表。我們快速在customers.module注冊，并使用<app-customers-list></app-customers-list>選擇器顯示空表。

Next step would be to populate the table with some data.

下一步將用一些數據填充表。

第11部分：組件和模塊—添加過濾器文本框組件 (Part 11: Components & Modules?—?Adding a Filter Textbox Component)

Before we add some data to our table, Dan shows us how to add a filter-textbox.component to our table and we reinforce the Angular way of creating a component, registering it in a module and using it in our HTML with selectors.

在向表中添加數據之前，Dan向我們展示了如何向表中添加filter-textbox.component ，并增強了Angular創建組件，將其注冊到模塊中以及在選擇器中使用HTML的方式。

第12部分：組件和模塊-添加共享的模塊和接口 (Part 12: Components & Modules?—?Adding a Shared Module and Interfaces)

In this section, Dan talks about using shared.module?—?a module where we put components or other features that we want to share throughout our app, not just in customers.

在本節中，Dan討論了使用shared.module -一個模塊，我們將要共享的組件或其他功能放置在整個應用程序中，而不僅僅是在customers 。

We also have a quick refresher on TypeScript interfaces and how they can be used in Angular applications to provide better code help and enhance productivity.

我們還對TypeScript接口以及如何在Angular應用程序中使用它們提供了快速更新，以提供更好的代碼幫助并提高生產力。

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

第13部分：數據綁定-數據綁定概述 (Part 13: Data Binding?—?Data Binding Overview)

In this chapter we learn about data binding, learn a few techniques and see how to add data binding to our application.

在本章中，我們學習數據綁定，學習一些技巧，并了解如何向我們的應用程序添加數據綁定。

We usually bind data in our templates. Data binding comes into play when a component gets our data and hooks it into a template. We can get data into a template using Property Binding, and handle user events and get data out of a template using Event Binding. Angular provides a robust and clean way to add data binding in templates that’s quick and easy to remember.

我們通常將數據綁定到模板中。當組件獲取我們的數據并將其掛鉤到模板中時，數據綁定就起作用了。我們可以使用Property Binding將數據獲取到模板中，并使用Event Binding處理用戶事件，并從模板獲取數據。 Angular提供了一種健壯且干凈的方法，可以在模板中添加數據綁定，這種方法簡便易記。

Dan provides us with a handy slide to remember syntax required…

Dan為我們提供了方便的幻燈片，以記住所需的語法…

…and some on Angular directives, for example, ngFor, used to loop through items in a collection and get some properties from the items, and ngIf to add and remove an HTML element from the DOM.

…以及一些有關Angular指令的指令，例如ngFor ，用于循環遍歷集合中的項目并從這些項目中獲取一些屬性，而ngIf用于在DOM中添加和刪除HTML元素。

第14部分：數據綁定-數據綁定入門 (Part 14: Data Binding?—?Getting Started with Data Binding)

In this cast we play around with Property Binding and Event Binding to better understand how they work in Angular, using the knowledge from the previous chapter.

在本文中，我們將使用上一章的知識來研究Property Binding和Event Binding以更好地了解它們在Angular中的工作方式。

Dan shows how we can use the [hidden] property to display an h1 element dynamically:

Dan展示了如何使用[hidden]屬性動態顯示h1元素：

<h1 [hidden]="!isVisible">{{ title }}</h1>

And to bind DOM events such as click:

并綁定DOM事件，例如click：

<button (click)="changeVisibility()">Show/Hide</button>

第15部分：數據綁定-指令和插值 (Part 15: Data Binding?—?Directives and Interpolation)

Here we have a look at Interpolation. The rationale is that we need to get data from each customer to generate a table row in a table from Part #10.

在這里，我們看一下插值。理由是我們需要從每個客戶那里獲取數據，以便在第10部分的表中生成表行。

This is the part when things start coming together: we use directive ngFor to loop through each customer in filteredCustomers and interpolate data from a customer into a table row. We learn a few tricks about rendering data conditionally using ngIf.

這是一部分時，事情開始走到一起：我們使用指令ngFor通過在每個客戶循環filteredCustomers和插值數據從客戶到表行。我們學習了一些有關使用ngIf有條件渲染數據的技巧。

In the end we get a pretty looking table!

最后，我們得到一張漂亮的桌子！

第16部分：數據綁定-事件綁定 (Part 16: Data Binding?—?Event Binding)

Event Binding is crucial when we need to handle an event, like a mouse move or a click. In this screencast, Dan guides us through adding functionality to sort the data in our table. We will start on it in this chapter and finish it when we get to the Services part of our course.

當我們需要處理事件(例如鼠標移動或單擊)時， Event Binding至關重要。在此截屏視頻中，Dan指導我們添加功能以對表中的數據進行排序。我們將在本章中開始并在完成本課程的“服務”部分時完成。

We create a placeholder event handler in our customer-list.component:

我們在customer-list.component創建一個占位符事件處理程序：

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

Add binding in customers-list.component.html:

在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部分：數據綁定-輸入屬性 (Part 17: Data Binding?—?Input Properties)

We have some data in a people array in our customers.component and we need to pass it into our filteredCustomers array in customers-list.component, effectively passing data from a parent component to a child.

我們的customers.component中的people數組中有一些數據，我們需要將其傳遞到customers-list.component filteredCustomers數組中，以有效地將數據從父組件傳遞到子組件。

For that we will use Angular’s Input property which relies on a decorator named Input():

為此，我們將使用Angular的Input屬性，該屬性依賴于一個名為Input()的裝飾器：

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

And bind to it in our parent component template to pass data from parent to child (app-customers-list in this case):

并將其綁定到我們的父組件模板中，以將數據從父對象傳遞到子對象(在這種情況下為app-customers-list)：

<app-customers-list [customers]="people"></app-customers-list>

第18部分：數據綁定-使用管道 (Part 18: Data Binding?—?Working with Pipes)

Wow! We’ve done quite well so far!

哇！到目前為止，我們做得很好！

There are a few things which might look a bit odd?—?“john” is lowercase and we have no “$” symbol to display currency in which we have our orders.

有些事情可能看起來有些奇怪-“ john”是小寫字母，并且我們沒有“ $”符號來顯示訂單中使用的貨幣。

This is really the way we have our data, so we could just go and update it directly, or we can use a built-in Angular feature called Pipes to update it for us!

這確實是我們擁有數據的方式，因此我們可以直接進行更新，也可以使用稱為Pipes的內置Angular功能為我們更新數據！

Some of the simplest pipes look like this:

一些最簡單的管道如下所示：

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

But sometimes you might want to have your own custom pipe and Dan shows us how to build a custom capitalize pipe (note that Angular includes one called titlecase?—?but we’re learning here!) and how to wire it up to use in our application.

但是有時您可能想要擁有自己的自定義管道，Dan向我們展示了如何構建自定義的capitalize管道(請注意，Angular包含一個稱為titlecase ，但是我們正在這里學習！)以及如何將其連接起來以在我們的應用程序中使用。

第19部分：數據綁定-添加過濾 (Part 19: Data Binding?—?Adding Filtering)

In this cast, Dan walks us through adding functionality to our filter-textbox.component from Part #11

在此演員表中，Dan帶領我們完成了第11部分中為filter-textbox.component添加功能的過程

We learn more about Angular Output and EventEmitter properties, create our filter event handler and bind it to our filter textbox:

我們了解有關Angular Output和EventEmitter屬性的更多信息，創建過濾器事件處理程序并將其綁定到過濾器文本框：

<filter-textbox (changed)="filter($event)"></filter-textbox>

And there we go, we can now filter on our customers’ names!

至此，我們現在就可以過濾客戶的姓名！

第20部分：服務和Http —服務概述 (Part 20: Services and Http?—?Services Overview)

In this chapter, we look at Angular Services. One of Angular’s strong points is that it’s a complete framework that provides built-in support for managing state and objects through services. We saw services in the diagram earlier. Since we don’t want components to know how to do too much, we’ll rely on services to communicate with the server, perform client-side validation or calculations, etc.

在本章中，我們將介紹Angular Services。 Angular的強項之一是它是一個完整的框架，為通過服務管理狀態和對象提供內置支持。我們早先在圖中看到了服務。由于我們不希望組件知道如何做太多事情，因此我們將依靠服務與服務器進行通信，執行客戶端驗證或計算等。

Components should focus on presenting data and handling user events. When additional functionality needs to be performed they should delegate to services to provide for a more maintainable application and better code reuse.

組件應專注于呈現數據和處理用戶事件。當需要執行其他功能時，它們應委派給服務以提供更可維護的應用程序和更好的代碼重用。

That’s exactly what Service does?—?some reusable functionality for the app which should not be of any component’s concern.

這正是Service所要做的-應用程序的某些可重用功能，與組件無關。

Luckily, Dan get us covered with a handy slide to keep in mind.

幸運的是，Dan為我們提供了一張方便的幻燈片供您記住。

第21部分：服務和Http-創建和提供服務 (Part 21: Services and Http?—?Creating and Providing a Service)

From a chapter earlier we have seen an import of Injectible which is a decorator that allows for something called Dependency Injection or DI for short (another powerful feature built-into Angular).

從前面的章節中，我們已經看到了Injectible的導入，它是一個裝飾器，允許簡稱為Dependency Injection或DI(Angular內置的另一個強大功能)。

We’ll use DI to access an HttpClient service which we will use to communicate with a RESTful service. We will be adding HttpClient to a constructor of our data.service and @Injectible() decorator will make DI possible.

我們將使用DI訪問HttpClient服務，該服務將用于與RESTful服務進行通信。我們將HttpClient添加到data.service的構造函數中，而@Injectible()裝飾器將使DI成為可能。

第22部分：服務和Http-使用HttpClient調用服務器 (Part 22: Services and Http?—?Calling the Server with HttpClient)

In this cast, Dan introduces Observables from RxJS?—?reactive extensions for JavaScript, which is not a part of Angular but is included in all Angular projects by default.

在此演員表中，Dan介紹了RxJS Observables — JavaScript的React式擴展，它不是Angular的一部分，但默認情況下包含在所有Angular項目中。

We will be using Observables to deal with asynchronous code. In a nutshell, it allows us to start an operation and then subscribe to data that is returned. Once the data comes back from the server, the subscription ends and we can unsubscribe.

我們將使用Observables處理異步代碼。簡而言之，它允許我們開始一個操作，然后訂閱返回的數據。數據從服務器返回后，訂閱結束，我們可以退訂。

Dan discusses the necessary code to call the server and then subscribe to the response using RxJS piping and operators.

Dan討論了必要的代碼以調用服務器，然后使用RxJS管道和運算符訂閱響應。

Here’s an example of how we can get Orders:

以下是我們如何獲取訂單的示例：

第23部分：服務和Http —將服務注入組件 (Part 23: Services and Http?—?Injecting a Service into a Component)

Now that we have a way to get the data, we need to inject the service into one of our components. We can now change this.people in customers.component from being hardcoded to call a service and get data that way.

現在我們有了獲取數據的方法，我們需要將服務注入到我們的組件之一中。現在，我們可以改變this.people在customers.component被硬編碼來調用服務，并獲取數據的方式。

We need to bring our data.service to app.module and then in customers.component we can:

我們需要將data.service引入app.module ，然后在customers.component我們可以：

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

Now we can inject our DataService straight into our component’s constructor:

現在，我們可以將DataService直接注入到組件的構造函數中：

constructor(private dataService: DataService) {}

第24部分：服務和Http-訂閱可觀察的對象 (Part 24: Services and Http?—?Subscribing to an Observable)

Now we can use our injected dataService, call getCustomers() and subscribe to our Observable<ICustomer[]> to get the data.

現在，我們可以使用注入的dataService ，調用getCustomers()并訂閱Observable<ICustomer[]>以獲取數據。

Which is pretty straightforward:

這很簡單：

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

Now we have one last service to look at?—?SorterService

現在，我們有最后一個服務要看— SorterService

第25部分：服務和Http —使用SorterService (Part 25: Services and Http?—?Using a SorterService)

Currently, if we click on our column headers nothing would happen.

當前，如果我們單擊列標題，將不會發生任何事情。

Dan handily provided a prewritten service for us, which we can use, so in this chapter, we will practice bringing in service into our components, in this case, customers-list.component.

Dan親自為我們提供了可以使用的預先編寫的服務，因此在本章中，我們將練習將服務引入組件中，在這種情況下，是customers-list.component 。

As with other services we need to import it:

與其他服務一樣，我們需要導入它：

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

Then we inject SorterService into our constructor:

然后，將SorterService注入到我們的構造函數中：

constructor(private sorterService: SorterService) {}

Dependency injection makes it extremely easy to access reusable code such as the sorter or data services.

依賴注入使訪問排序器或數據服務等可重用代碼變得異常容易。

Lastly, we use it in our sort() function:

最后，我們在sort()函數中使用它：

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

第26部分：路由-路由概述 (Part 26: Routing?—?Routing Overview)

This chapter will introduce Routing, which is an essential part of modern applications. As you’re building an Angular app, you want to show different components as the user interacts with it. In our case, when a user clicks on a Customer, we might want to show them Orders. Routing is one way to very neatly achieve this.

本章將介紹路由，路由是現代應用程序的重要組成部分。在構建Angular應用程序時，您希望在用戶與其交互時顯示不同的組件。在我們的案例中，當用戶單擊客戶時，我們可能希望向他們顯示訂單。路由是一種非常巧妙地實現此目的的方法。

Routes are used to hook a specific URL to a component and in the next few chapters, we will be focusing on the top part of our Angular diagram.

路由用于將特定的URL鏈接到組件，在接下來的幾章中，我們將重點介紹Angular圖的頂部。

A super great part of routing is that if a user bookmarks a specific URL, it will bring them back to a specific component and there is no need for complex show/hide logic.

路由的一個重要方面是，如果用戶為特定的URL加上書簽，它將把它們帶回到特定的組件，并且不需要復雜的顯示/隱藏邏輯。

第27部分：路由-使用路由創建路由模塊 (Part 27: Routing?—?Creating a Routing Module with Routes)

We begin with a familiar module-container routine and create a app-routing.module.

我們從熟悉的module-container例程開始，然后創建一個app-routing.module 。

A main focus of the app-routing.module is to define the routes in an array:

app-routing.module主要焦點是在數組中定義路由：

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

Three key properties of routes are:

routes三個關鍵屬性是：

path?—?where your user goes, so path: '' would be the root of your app. path: '**' is a wild card match. It is usually placed last and it’s there to cover cases for any route that is not specified in routes
path用戶前往的位置，因此path: ''將成為您應用的根目錄。 path: '**'是通配符匹配。它通常是放在最后的，它的存在給蓋的情況下對未在規定的任何途徑routes
pathMatch?—?how exactly should the route match for a specific component to be displayed
pathMatch —路線如何精確匹配要顯示的特定組件
redirectTo?—?when a path is matched, this is where we send the user. In our case, we send them to /customers.
redirectTo —當路徑匹配時，這就是我們發送用戶的位置。就我們而言，我們將它們發送給/customers 。

第28部分：路由-使用路由器插座 (Part 28: Routing?—?Using Router Outlet)

In order to use Routing in Angular in our app.component template we replace <app-customers></app-customers> with <router-outlet></router-outlet>. Ultimately, this is just a way to say: ‘Hey, this is where a component will go when we hit our route’.

為了在我們的app.component模板中使用Angular中的路由，我們將<app-customers></app-customers>替換為<router-outlet></router-outlet> 。最終，這只是一種表達方式：“嘿，這是我們上路時要去的零件”。

When we hit a route, then a component associated with that route will magically appear in the place of <router-outlet></router-outlet>.

當我們點擊一??條路線時，與該路線相關的組件將神奇地出現在<router-outlet></router-outlet> 。

第29部分：路由—添加客戶路由模塊和路由 (Part 29: Routing?—?Adding a Customers Routing Module and Routes)

In this chapter, Dan brings all the things together and we connect a /customer route to customers.component.

在本章中，Dan將所有內容整合在一起，我們將/customer路線連接到customers.component 。

First, we create acustomers-routing.module and point our route from part #28 to customers.component like so:

首先，我們創建一個customers-routing.module并將指向第28部分的路線指向customers.component如下所示：

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

And now when we type “customers” in the Scrimba browser address bar we get our customers.component.

現在，當我們在Scrimba瀏覽器地址欄中鍵入“ customers” 時，便得到了customers.component 。

第30部分：路由—使用路由添加訂單組件 (Part 30: Routing?—?Adding an Orders Component with Routes)

In this clip, we’re going to quickly review how we’ve done routing to display customers, and now it’s time for routing to display their orders.

在此剪輯中，我們將快速回顧如何完成路由以顯示客戶，現在是時候路由以顯示他們的訂單了。

There’s a little catch though. When we click on a customer we need to display order data related to that customer. So we need to pass some dynamic data into our routing.

有一點收獲。當我們單擊一個客戶時，我們需要顯示與該客戶相關的訂單數據。因此，我們需要將一些動態數據傳遞到路由中。

We can achieve this by passing a route parameter in our orders-routing.module like so:

我們可以通過在orders-routing.module傳遞一個route parameter來實現此目的，如下所示：

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

Note the /:id syntax. In routing the : symbol indicates that the value after it will be dynamically replaced and id is just a variable, so it can be anything like :country or :book.

注意/:id語法。在路由中， :符號表示將動態替換其后的值，而id只是一個變量，因此它可以是:country或:book 。

第31部分：路由—訪問路由參數 (Part 31: Routing?—?Accessing Route Parameters)

In the previous screencast we saw how to create orders/:id route and now orders.component needs to somehow grab that id and display customer related orders. To do that we need to access the id route parameter.

在上一個截屏視頻中，我們看到了如何創建orders/:id路線，現在orders.component需要以某種方式獲取該id并顯示與客戶相關的訂單。為此，我們需要訪問id route參數。

One way of doing it would be:

一種方法是：

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

The benefit of this way is that we can subscribe to paramMap and get notified when any of the data in id changes. But we only need it once.

這種方式的好處是我們可以訂閱paramMap并在id任何數據更改時得到通知。但是我們只需要一次。

We can use snapshot for that:

我們可以為此使用snapshot ：

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

snapshot just takes a kind of an instant picture of your URL and gives it to you, which perfect as that’s what we need in this situation.

snapshot只是為您的URL拍攝了一張即時圖片，并將其提供給您，這非常完美，因為在這種情況下我們需要這樣做。

But now we have a problem. Our id is a string, but to get an order from our DataService it needs to be a number. We can convert it with parseInt(), but Dan teaches us a neat + trick:

但是現在我們有一個問題。我們的id是一個字符串，但是要從我們的DataService獲取訂單，它必須是一個數字。我們可以把它轉換parseInt()但丹告訴我們一個整潔+技巧：

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

Now we can call DataService to get the order and render it to orders.component.

現在我們可以調用DataService來獲取訂單并將其呈現給orders.component 。

第32部分：路由—使用routerLink指令鏈接到路由 (Part 32: Routing?—?Linking to Routes with the routerLink Directive)

The last thing we want to do is to add a link on a customer’s name, so we can click it to see their orders.

我們要做的最后一件事是在客戶名稱上添加一個鏈接，因此我們可以單擊它以查看他們的訂單。

In part #28 we’ve added <router-outlet></router-outlet and now we just need to tell our app that we want to display orders.component when we navigate to /orders/:id.

在第28部分中，我們添加了<router-outlet></router-outlet ，現在我們只需要告訴我們的應用，當我們導航到/orders/:id時，我們想顯示orders.component 。

We can do it by adding a link to our customer’s name in customers-list.component.html in a row where we’re mapping all the data to be displayed. We already have our customer object there, so we can just pass id to our route.

customers-list.component.html ，我們可以在要映射要顯示的所有數據的行中的customers-list.component.html中添加指向客戶名稱的鏈接。我們已經在這里有了我們的客戶對象，因此我們可以將id傳遞給我們的路線。

<a [routerLink]="['/orders', cust.id]">  {{ cust.name | capitalize }}  
</a>

Now we can see orders!

現在我們可以看到訂單！

But hey, how do we get back? We could click ‘Back’ button on the browser, but it’s much nicer to have an app link for that, now that we know routing. Let’s add it to customers-list.component.html at the very bottom.

但是，嘿，我們怎么回來？我們可以單擊瀏覽器上的“后退”按鈕，但是有了一個應用程序鏈接會更好，因為我們知道路由。讓我們將其添加到customers-list.component.html中。

<a routerLink="/customers">View All Customers</a>

第33部分：課程摘要 (Part 33: Course Summary)

Very well done, we have our app now!

做得很好，我們現在有了我們的應用程序！

We can wrap up and have a quick recap of things done. Don’t forget to watch the actual screencast of the course, as Dan is a great teacher so you will have lots of fun following the process alongside him!

我們可以總結一下，并快速回顧一下已完成的事情。丹(Dan)是一位很棒的老師，請不要忘記觀看課程的實際轉播，因此跟隨他的過程，您將獲得很多樂趣！

Thank you, Dan!

謝謝，丹！

If you’re interested in keeping up on front-end and back-end technologies make sure to follow Dan on Twitter!

如果您有興趣了解前端和后端技術，請確保在Twitter上關注Dan ！

Happy coding!

編碼愉快！

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.

謝謝閱讀！我叫Per Borgen，我是Scrimba的共同創始人–學習編碼的最簡單方法。如果要學習以專業水平構建現代網站，則應查看我們的響應式Web設計新手訓練營。

翻譯自: https://www.freecodecamp.org/news/want-to-learn-angular-heres-our-free-33-part-course-by-dan-wahlin-fc2ff27ab451/