angular 模块构建_如何通过11个简单的步骤从头开始构建Angular 8应用

angular 模块构建

Angular is one of the three most popular frameworks for front-end development, alongside React and Vue.js. The latest version is Angular 8 which was released on May 28, 2019.

Angular是与React和Vue.js并排的三种最受欢迎​​的前端开发框架之一。 最新版本是Angular 8，已于2019年5月28日发布。

There are many new features and enhancements to both the command-line interface and the framework itself which result in a performance-boost and smaller production bundles. One interesting feature is the ng deploy command which allows developers to quickly build and deploy their Angular apps to popular hosting providers such as Firebase or GitHub.

命令行界面和框架本身都有许多新功能和增强功能，从而提高了性能，并减少了生产量。 ng deploy命令是一项有趣的功能，它使开发人员可以快速将Angular应用程序构建和部署到流行的托管提供商(例如Firebase或GitHub)。

In this tutorial, we’ll take you step by step on a journey to build an example Angular application from scratch that uses many Angular APIs such as HttpClient, and Material Design.

在本教程中，我们将逐步引导您从头开始构建一个使用许多Angular API(例如HttpClient和Material Design)的示例Angular应用程序。

Here are a few things we'll learn:

这是我们将要学习的一些知识：

• How to mock a REST API server that uses fake data from a JSON file
  如何模拟使用JSON文件中的伪数据的REST API服务器

• How to consume the REST API from our Angular 8 application using  Httplient

  如何使用Httplient从Angular 8应用程序中使用REST API

• How to handle HTTP errors using the RxJS  throwError()  and  catchError()  operators

  如何使用RxJS throwError()和catchError()运算符处理HTTP错误

• How to retry failed HTTP requests in poor network conditions and cancel pending requests using the RxJS  retry()  and  takeUntil() operators

  如何在恶劣的网络条件下重试失败的HTTP请求以及如何使用RxJS retry()和takeUntil()运算符取消待处理的请求

• How to create and make use of Angular components and services
  如何创建和利用Angular组件和服务
• How to set up routing and Angular Material in our project and create a professional-looking UI with Material Design components
  如何在我们的项目中设置Craft.io路线和Angular Material，以及如何使用Material Design组件创建具有专业外观的UI

• And finally, we’ll learn how to deploy the application to Firebase using the  ng deploy  command available in Angular 8.3+.

  最后，我们将学习如何使用Angular 8.3+中提供的ng deploy命令将应用程序部署到Firebase。

You’ll also learn by example:

您还将通过示例学习：

• How to quickly mock a REST API with real-world features, such as pagination, that you can consume from your app before you can switch to a real backend when it’s ready.
  如何快速模拟具有现实世界功能(例如分页)的REST API，您可以从应用程序中使用这些功能，然后在准备就绪时切换到真实的后端。
• How to set up Angular CLI
  如何设置Angular CLI
• How to initialize your Angular 8 project
  如何初始化Angular 8项目
• How to set up Angular Material
  如何设置角材料
• How to add Angular components and routing
  如何添加Angular组件和路由
• How to generate and use Angular services
  如何生成和使用Angular服务
• How to consume REST APIs with Angular HttpClient
  如何使用Angular HttpClient使用REST API
• How to build and deploy your Angular application to Firebase.
  如何将Angular应用程序构建和部署到Firebase。

This tutorial is divided into the following steps:

本教程分为以下步骤：

• Step 1 — Installing Angular CLI 8
  第1步-安装Angular CLI 8
• Step 2 — Creating your Angular 8 Project
  第2步-创建Angular 8项目
• Step 3 — Adding Angular HttpClient
  第3步—添加Angular HttpClient
• Step 4 — Creating Components
  第4步-创建组件
• Step 5 — Adding Routing
  步骤5 —添加路由
• Step 6 — Building the UI with Angular Material Components
  第6步-使用Angular材质组件构建UI
• Step 7 — Mocking a REST API
  第7步-模拟REST API
• Step 8 — Consuming the REST API with Angular HttpClient
  第8步—使用Angular HttpClient使用REST API
• Step 9 — Handling HTTP Errors
  步骤9 —处理HTTP错误
• Step 10 — Adding Pagination
  第10步-添加分页
• Step 11 — Building and Deploying your Angular Application to Firebase
  第11步–将您的Angular应用程序构建和部署到Firebase

Now, let’s get started with the prerequisites!

现在，让我们开始先决条件！

Note: you can download our Angular 8 Book: Build your first web apps with Angular 8 for free.

注意 ：您可以免费下载我们的Angular 8图书：使用Angular 8构建您的第一个Web应用程序 。

先决条件 (Prerequisites)

If you want to follow this tutorial, you’ll need to have:

如果要遵循本教程，则需要具备以下条件：

• Prior knowledge of TypeScript.
  具有TypeScript的先验知识。

• A development machine with  Node 8.9+ and  NPM 5.5.1+  installed. Node is required by the Angular CLI. You can head to the official website and grab the binaries for your system. You can also use  NVM  — Node Version Manager — a POSIX-compliant bash script to install and manage multiple Node.js versions in your machine.

  安装了Node 8.9+和NPM 5.5.1+的开发机器。 Angular CLI需要节点。 您可以访问官方网站并获取系统的二进制文件。 您还可以使用NVM-节点版本管理器-POSIX兼容的bash脚本在计算机中安装和管理多个Node.js版本。

If you are ready, let’s learn by example how to build an Angular 8 application that consumes a REST API using HttpClient. We'll implement real-world features like error handling and retrying failed HTTP requests.

如果您准备好了，让我们通过示例学习如何使用HttpClient构建使用REST API的Angular 8应用程序。 我们将实现实际功能，例如错误处理和重试失败的HTTP请求。

第1步-安装Angular CLI 8 (Step 1 — Installing Angular CLI 8)

Let’s start with the first step, where we’ll install the latest version of Angular CLI.

让我们从第一步开始，我们将安装最新版本的Angular CLI。

Angular CLI  is the official tool for initializing and working with Angular projects. Head to a new terminal and execute the following command:

Angular CLI是用于初始化和使用Angular项目的官方工具。 转到新终端并执行以下命令：

$ npm install -g @angular/cli

When writing this tutorial,  angular/cli v8.3.2  is installed on our system.

在编写本教程时，我们的系统上已安装angular / cli v8.3.2 。

That’s it, you are ready for the second step!

就是这样，您已经准备好进行第二步！

第2步-创建Angular 8项目 (Step 2 — Creating your Angular 8 Project)

In this step, we’ll use Angular CLI to initialize our Angular project.

在此步骤中，我们将使用Angular CLI初始化Angular项目。

Go to your terminal and execute these commands:

转到终端并执行以下命令：

$ cd ~  
$ ng new angular-example

The CLI will prompt you and ask whether you would like to add Angular routing. Say Yes. It'll then ask which stylesheet format you would like to use. Choose CSS.

CLI会提示您，并询问您是否要添加Angular路由。 说是。 然后，它将询问您要使用哪种样式表格式。 选择CSS 。

Angular CLI will generate the required files and folders, install the packages from npm, and even automatically set up routing in our project.

Angular CLI将生成所需的文件和文件夹，从npm安装软件包，甚至在我们的项目中自动设置路由。

Now, go to your project’s root folder and run the local development server using these commands:

现在，转到项目的根文件夹，并使用以下命令运行本地开发服务器：

$ cd angular-example  
$ ng serve

Your Angular web application will be available from the  [http://localhost:4200/](http://localhost:4200/)  address.

您可以从[http://localhost:4200/](http://localhost:4200/)地址访问Angular Web应用程序。

Open a web browser and go to the  http://localhost:4200/ address. You should see this beautiful page (Starting with Angular 8.3+):