搭建本地开发环境和工作区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

要想使用 Angular 框架，你要先熟悉下列技术：

To use the Angular framework, you should be familiar with the following:

• JavaScript
• HTML
• CSS

关于 TypeScript 的知识会很有用，但不是必须的。

Knowledge of TypeScript is helpful, but not required.

要想在你的本地系统中安装 Angular，需要如下步骤：

To install Angular on your local system, you need the following:

• Node.js

  Angular 需要 Node.js 的活跃 LTS 版或维护期 LTS版。

  Angular requires an active LTS or maintenance LTS version of Node.js.

  关于具体版本需求，参阅 package.json 文件中的 engines。

  For information about specific version requirements, see the engines key in the package.json file.

  要了解如何安装 Node.js，参阅 nodejs.org。 如果你不确定系统中正在运行的 Node.js 版本是什么，请在终端窗口中运行 node -v。

  For more information on installing Node.js, see nodejs.org. If you are unsure what version of Node.js runs on your system, run node -v in a terminal window.

• npm 包管理器

  npm package manager

  Angular、Angular CLI 以及 Angular 应用都要依赖 npm 包来实现很多特性和功能。要下载并安装 npm 包，你需要一个 npm 包管理器。本指南使用 npm 客户端命令行界面，该界面默认安装在 Node.js。要检查你是否安装了 npm 客户端，请在终端窗口中运行 npm -v 。

  Angular, the Angular CLI, and Angular applications depend on npm packages for many features and functions. To download and install npm packages, you need an npm package manager. This guide uses the npm client command line interface, which is installed with Node.js by default. To check that you have the npm client installed, run npm -v in a terminal window.

安装 Angular CLIlink

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.

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

To install the Angular CLI, open a terminal window and run the following command:

      
        content_copy
      
      npm install -g @angular/cli
    

创建工作区和初始应用link

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:

         
           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.

运行应用link

Run the applicationlink

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

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

1. 导航到 workspace 文件夹，比如 my-app。

   Navigate to the workspace folder, such as my-app.

2. 运行下列命令：

   Run the following command:

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

如果你的安装和环境搭建成功了，就会看到如下页面：

If your installation and setup was successful, you should see a page similar to the following.

下一步link

Next stepslink

• 关于 Angular 单页应用程序架构和设计原理的基本概念和术语的详尽介绍，参阅 Angular 的基本概念部分。

  For a more thorough introduction to the fundamental concepts and terminology of Angular single-page app architecture and design principles, read the Angular Concepts section.

• 过一遍英雄之旅教程，这是一个完整的动手练习题，它将教你使用 Angular CLI 进行应用开发的过程，并逐步介绍重要的子系统。

  Work through the Tour of Heroes Tutorial, a complete hands-on exercise that introduces you to the app development process using the Angular CLI and walks through important subsystems.

• 要了解关于使用 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.