honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
angular-cn/aio/content/guide/quickstart.md

12 KiB
Raw Blame History

Getting started

快速上手

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

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

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.

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

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

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

{@a devenv} {@a prerequisites}

Prerequisites

先决条件

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

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

{@a nodejs}

Node.js

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

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

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

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

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

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

{@a npm}

npm package manager

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.

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

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

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

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

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

{@a install-cli}

Step 1: Install the Angular CLI

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

全局安装 Angular CLI。

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

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

npm install -g @angular/cli

{@a create-proj}

Step 2: Create a workspace and initial application

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

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.

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

To create a new workspace and initial app project:

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

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

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

    ng new my-app

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

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

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

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

It also creates the following workspace and starter project files:

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

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

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

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

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

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

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

  • Related configuration files

    相关的配置文件

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

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

{@a serve}

Step 3: Serve the application

步骤 3：启动开发服务器

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

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

  1. Go to the workspace folder (my-app).

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

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

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

cd my-app ng serve --open

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

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

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

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

Your app greets you with a message:

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

Welcome to my-app!

{@a first-component}

Step 4: Edit your first Angular component

步骤 4：编辑你的第一个 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.

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

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.

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

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

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

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

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

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

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

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

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

Looking good!

看起来不错！

Output of Getting Started app

{@a project-file-review}

Final code review

最终代码回顾

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

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

Tip: Most Angular guides include links to download example files and run live examples in Stackblitz, so that you can see Angular concepts and code in action.

提示： 这里的大多数章节中都包含同时下载范例文件和通过 Stackblitz 在线运行它的链接，这样你就能在实战中观察这些 Angular 的概念和代码。

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

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

Next steps

下一步

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

现在，你已经了解了 Angular 和 Angular CLI 的基本元素，请访问下列介绍性素材以继续：

  • 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

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

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

    架构描述了一些关键概念，比如模块、组件、服务和依赖注入（DI）。它为你深入了解一些 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.

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