搭建本地开发环境和工作空间link

Setting up the local environment and workspacelink

本指南讲解了如何使用 Angular CLI 工具搭建你的 Angular 开发环境。包括：前提条件、安装 CLI、创建初始工作空间和入门应用，以及在本地运行这个应用来验证你的搭建成果。

This guide explains how to set up your environment for Angular development using the Angular CLI tool. It includes information about prerequisites, installing the CLI, creating an initial workspace and starter app, and running that app locally to verify your setup.

前提条件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 版本 10.9.0 或更高版本。

Angular requires a current, active LTS, or maintenance LTS version of Node.js. See the engines key for the specific version requirements in our package.json.

• 要检查你的版本，请在终端/控制台窗口中运行 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 setup guide 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.

第 1 步：安装 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
    

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

Step 2: Create a workspace and initial applicationlink

你要在 Angular 工作区的上下文中开发应用。

You develop apps in the context of an Angular workspace.

要创建一个新的工作空间和初始入门应用：

To create a new workspace and initial starter app:

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 命令会提示你提供要把哪些特性包含在初始应用中。按 Enter 或 Return 键可以接受默认值。

   The ng new command prompts you for information about features to include in the initial app. 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.

CLI 会创建一个新的工作区和一个简单的欢迎应用，随时可以运行它。

The CLI creates a new workspace and a simple Welcome app, ready to run.

第 3 步：运行应用link

Step 3: Run the applicationlink

Angular CLI 中包含一个服务器，方便你在本地构建和提供应用。

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

1. 转到 workspace 文件夹（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/.

你会看到：

You will see:

下一步link

Next stepslink

• 如果你不熟悉 Angular，请参阅快速上手教程。在构建基本的在线商店应用的过程中，快速上手可以帮助你快速学习 Angular 的基本知识。

  If you are new to Angular, see the Getting Started tutorial. Getting Started helps you quickly learn the essentials of Angular, in the context of building a basic online store app.

• 要了解关于使用 Angular CLI 的更多信息，请参阅 CLI 概述 。除了创建初始工作空间和应用搭建之外，你还可以使用 CLI 来生成 Angular 代码，比如组件和服务。 CLI 支持完整的开发周期，包括构建、测试、打包和部署。

  To learn more about using the Angular CLI, see the CLI Overview. In addition to creating the initial workspace and app scaffolding, you can use the CLI to generate Angular code such as components and services. The CLI supports the full development cycle, including building, testing, bundling, and deployment.

• 要了解更多关于 ng new 生成的 Angular 文件的信息，请参阅工作区和项目文件结构 。

  For more information about the Angular files generated by ng new, see Workspace and Project File Structure.