在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/