快速上手link

Getting startedlink

欢迎使用 Angular！Angular 可以帮助你为 Web、移动端或桌面构建现代应用程序。

Welcome to Angular! Angular helps you build modern applications for the web, mobile, or desktop.

本指南会介绍如何构建并运行一个简单的 Angular 应用。 你将使用 Angular CLI 工具来加速开发，并遵守风格指南中的建议，这些建议将使每一个 Angular 应用受益。

This guide shows you how to build and run a simple Angular app. You'll use the Angular CLI tool to accelerate development, while adhering to the Style Guide recommendations that benefit every Angular project.

本指南只要不到 30 分钟即可完成。本指南末尾的最终代码回顾部分提供了一个链接，你可以去下载最终应用代码的一份复本。（就算你没有执行本章的这些命令，也仍然可以直接下载这份最终版的应用代码。）

This guide takes less than 30 minutes to complete. At the end of this guide—as part of final code review—there is a link to download a copy of the final application code. (If you don't execute the commands in this guide, you can still download the final application code.)

先决条件link

Prerequisiteslink

在开始之前，请确保你的开发环境已经包含了 Node.js® 和 npm 包管理器。

Before you begin, make sure your development environment includes Node.js® and an npm package manager.

Node.jslink

Angular 需要 Node.js 的 8.x 或 10.x 版本。

Angular requires Node.js version 8.x or 10.x.

• 要想检查你的版本，请在终端/控制台窗口中运行 node -v 命令。

  To check your version, run node -v in a terminal/console window.

• 要想安装 Node.js，请访问 nodejs.org。

  To get Node.js, go to nodejs.org.

npm 包管理器link

npm package managerlink

Angular、Angular CLI 和 Angular 应用都依赖于某些库所提供的特性和功能，它们都是 npm 包。要下载和安装 npm 包，你必须拥有一个 npm 包管理器。

Angular, the Angular CLI, and Angular apps depend on features and functionality provided by libraries that are available as npm packages. To download and install npm packages, you must have an npm package manager.

本 "快速上手" 中使用的是 npm 客户端命令行界面，在安装 Node.js 时就已经默认安装了它。

This Quick Start uses the npm client command line interface, which is installed with Node.js by default.

要想检查你是否已经安装了 npm 客户端，请在终端/控制台窗口中运行 npm -v 命令。

To check that you have the npm client installed, run npm -v in a terminal/console window.

第一步：安装 Angular CLIlink

Step 1: Install the Angular CLIlink

你要使用 Angular CLI 来创建项目、创建应用和库代码，并执行多种开发任务，比如测试、打包和发布。

You use the Angular CLI to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

全局安装 Angular CLI。

Install the Angular CLI globally.

要想使用 npm 来安装 CLI，请打开终端/控制台窗口，并输入下列命令：

To install the CLI using npm, open a terminal/console window and enter the following command:

      
        content_copy
      
      npm install -g @angular/cli
    

第二步：创建工作空间和初始应用link

Step 2: Create a workspace and initial applicationlink

Angular 工作空间就是你开发应用的上下文环境。 每个工作空间包含一些供一个或多个项目使用的文件。 每个项目都是一组由应用、库或端到端（e2e）测试构成的文件。

You develop apps in the context of an Angular workspace. A workspace contains the files for one or more projects. A project is the set of files that comprise an app, a library, or end-to-end (e2e) tests.

要想创建工作空间和初始应用项目：

To create a new workspace and initial app project:

1. 运行 CLI 命令 ng new，并提供一个名字 my-app，如下所示：

   Run the CLI command ng new and provide the name my-app, as shown here:

   ng new my-app

         
           content_copy
         
         ng new my-app
       

2. ng new 会提示你要把哪些特性包含在初始的应用项目中。请按回车键接受默认值。

   The ng new command prompts you for information about features to include in the initial app project. Accept the defaults by pressing the Enter or Return key.

Angular CLI 会安装必要的 Angular npm 包及其它依赖。这可能要花几分钟。

The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes.

还将创建下列工作空间和初始项目文件：

It also creates the following workspace and starter project files:

• 一个新的工作空间，根目录名叫 my-app

  A new workspace, with a root folder named my-app

• 一个初始的骨架应用项目，也叫 my-app（但位于 src 子目录下）

  An initial skeleton app project, also called my-app (in the src subfolder)

• 一个端到端测试项目（位于 e2e 子目录下）

  An end-to-end test project (in the e2e subfolder)

• 相关的配置文件

  Related configuration files

初始的应用项目是一个简单的 "欢迎" 应用，随时可以运行它。

The initial app project contains a simple Welcome app, ready to run.

第三步：启动开发服务器link

Step 3: Serve the applicationlink

Angular 包含一个开发服务器，以便你能轻易地在本地构建应用和启动开发服务器。

Angular includes a server, so that you can easily build and serve your app locally.

1. 进入工作空间目录（my-app）。

   Go to the workspace folder (my-app).

2. 使用 CLI 命令 ng serve 启动开发服务器，并带上 --open 选项。

   Launch the server by using the CLI command ng serve, with the --open option.

      
        content_copy
      
      cd my-app
ng serve --open
    

ng serve 命令会自动开发服务器，并监视你的文件变化，当你修改这些文件时，它就会重新构建应用。

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.

--open（或只用 -o）选项会自动打开浏览器，并访问 http://localhost:4200/。

The --open (or just -o) option automatically opens your browser to http://localhost:4200/.

看，你的应用正在使用一条消息欢迎你：

Your app greets you with a message:

第四步：编辑你的第一个 Angular 组件link

Step 4: Edit your first Angular componentlink

组件 是 Angular 应用中的基本构造块。 它们在屏幕上显示数据、监听用户输入，并根据这些输入采取行动。

Components are the fundamental building blocks of Angular applications. They display data on the screen, listen for user input, and take action based on that input.

作为初始应用的一部分，CLI 也会为你创建第一个 Angular 组件。它就是根组件，名叫 app-root。

As part of the initial app, the CLI created the first Angular component for you. It is the root component, and it is named app-root.

1. 打开 ./src/app/app.component.ts。

   Open ./src/app/app.component.ts.

2. 把 title 属性从 'my-app' 修改成 'My First Angular App'。

   Change the title property from 'my-app' to 'My First Angular App'.

   @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'My First Angular App!'; }
   src/app/app.component.ts

         
           content_copy
         
         @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent {
     title = 'My First Angular App!';
   }
       

   浏览器将会用修改过的标题自动刷新。很不错，但还可以更好看。

   The browser reloads automatically with the revised title. That's nice, but it could look better.

3. 打开 ./src/app/app.component.css 并给这个组件提供一些样式。

   Open ./src/app/app.component.css and give the component some style.

   h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; }
   src/app/app.component.css

         
           content_copy
         
         h1 {
     color: #369;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 250%;
   }
       

漂亮多了！

Looking good!

最终代码回顾link

Final code reviewlink

你可以下载在本章中创建的这个例子。

You can download an example of the app that you created in this Getting Started guide.

要了解关于 Angular 项目文件和文件结构的更多信息，请参见工作空间与项目的文件结构。

For more information about Angular project files and the file structure, see Workspace and project file struture.

下一步link

Next stepslink

现在，你已经了解了 Angular 和 Angular CLI 的基础知识，请继续访问下列介绍性材料：

Now that you've seen the essentials of an Angular app and the Angular CLI, continue with these other introductory materials:

• 英雄指南教程提供了更多的亲手演练。它将引导你完成构建应用程序的那些步骤。该应用可以帮助管理机构管理一些身为超级英雄的员工。 它具有你在数据驱动应用中所能看到的许多特性：

  The Tour of Heroes tutorial provides additional hands-on learning. It walks you through the steps to build an app that helps a staffing agency manage a group of superhero employees. It has many of the features you'd expect to find in a data-driven application:

  • 获取与显示条目的列表

    Acquiring and displaying a list of items

  • 编辑所选条目的详情

    Editing a selected item's detail

  • 在数据的不同视图之间导航

    Navigating among different views of the data

• 架构描述了一些关键概念，比如模块、组件、服务和依赖注入（DI）。它为你深入了解一些 Angular 专属的概念和特性奠定了基础。

  The Architecture guide describes key concepts such as modules, components, services, and dependency injection (DI). It provides a foundation for more in-depth guides about specific Angular concepts and features.

在读完 "英雄指南" 和 "架构" 之后，就可以通过本文档中的其它指南和参考资料自行探索 Angular 了，你可以重点关注那些对你的应用至关重要的特性。

After the Tutorial and Architecture guide, you'll be ready to continue exploring Angular on your own through the other guides and references in this documentation set, focusing on the features most important for your apps.