搭建本地开发环境

Setup a local development environment

搭建本地开发环境

The QuickStart live-coding example is an Angular playground. It's not where you'd develop a real application. You should develop locally on your own machine ... and that's also how we think you should learn Angular.

《快速起步》在线编程例子是 Angular 的游乐场。 它不是开发真实应用的地方。 你应该在自己的电脑上本地开发... 你也应该在本地环境学习 Angular。

Setting up a new project on your machine is quick and easy with the QuickStart seed, maintained on github.

利用 github 上的《快速起步》种子在你的电脑上搭建一个新项目是很快很容易的。

Make sure you have node and npm installed. Then ...

确定你已经安装了 node和npm，然后：

  1. Create a project folder (you can call it quickstart and rename it later).

    新建项目目录（你可以暂时为其取名quickstart，以后再重命名）。

  2. Clone or download the QuickStart seed into your project folder.

    克隆或者下载《快速起步》种子到你的项目目录。

  3. Install npm packages.

    安装 npm 包。

  4. Run npm start to launch the sample application.

    运行npm start来启动例子应用。

Clone

克隆

Perform the clone-to-launch steps with these terminal commands.

运行下列命令来执行克隆并启动步骤。

git clone https://github.com/angular/quickstart.git quickstart cd quickstart npm install npm start

npm start fails in Bash for Windows which does not support networking to servers as of January, 2017.

在Bash for Windows中npm start可能会失败，因为到2017-01为止它还不支持访问网络上的服务器。

Download

下载

Download the QuickStart seed and unzip it into your project folder. Then perform the remaining steps with these terminal commands.

下载《快速起步》种子 并解压到你的项目目录中。然后执行下面的命令完成剩余步骤。

cd quickstart npm install npm start

npm start fails in Bash for Windows which does not support networking to servers as of January, 2017.

在Bash for Windows中npm start可能会失败，因为到2017-01为止它还不支持访问网络上的服务器。

Delete non-essential files (optional)

删除非必需文件（可选）

You can quickly delete the non-essential files that concern testing and QuickStart repository maintenance (including all git-related artifacts such as the .git folder and .gitignore!).

你可以快速删除一些涉及到测试和维护快速开始版本库的 非必需 文件 （包括所有git相关的文件如 .git 文件夹和 .gitignore！）。

Do this only in the beginning to avoid accidentally deleting your own tests and git setup!

请只在开始时执行此删除操作，以防你自己的测试和git文件被意外删除！

Open a terminal window in the project folder and enter the following commands for your environment:

在项目目录下打开一个终端窗口，并根据你的操作系统执行以下命令：

OS/X (bash)

xargs rm -rf < non-essential-files.osx.txt rm src/app/*.spec*.ts rm non-essential-files.osx.txt

Windows

for /f %i in (non-essential-files.txt) do del %i /F /S /Q rd .git /s /q rd e2e /s /q

What's in the QuickStart seed?

《快速起步》种子库里都有什么？

The QuickStart seed contains the same application as the QuickStart playground. But its true purpose is to provide a solid foundation for local development. Consequently, there are many more files in the project folder on your machine, most of which you can learn about later.

《快速起步》种子 包含了与《快速起步》游乐场一样的应用，但是，它真正的目的是提供坚实的本地开发基础。 所以你的电脑里的项目目录里面有更多文件，参见搭建剖析。

Focus on the following three TypeScript (.ts) files in the /src folder.

注意/src目录中以下三个 TypeScript (.ts) 文件：

src
app
app.component.ts
app.module.ts
main.ts
import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>` }) export class AppComponent { name = 'Angular'; } import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; platformBrowserDynamic().bootstrapModule(AppModule);

All guides and cookbooks have at least these core files. Each file has a distinct purpose and evolves independently as the application grows.

所有指南和烹饪书都至少有这几个核心文件。每个文件都有独特的用途，并且随着应用的成长各自独立演变。

Files outside src/ concern building, deploying, and testing your app. They include configuration files and external dependencies.

src/ 目录之外的文件为构建、部署和测试app相关的文件，他们只包括配置文件和外部依赖。

Files inside src/ "belong" to your app. Add new Typescript, HTML and CSS files inside the src/ directory, most of them inside src/app, unless told to do otherwise.

src/ 目录下的文件才“属于”你的app。 除非明确指出，否则教程中添加的 TypeScript，HTML和CSS文件都在src/目录下， 大多数在src/app目录中。

The following are all in src/

src/目录文件详情如下：

File

文件

Purpose

用途

app/app.component.ts

Defines the same AppComponent as the one in the QuickStart playground. It is the root component of what will become a tree of nested components as the application evolves.

定义与《快速起步》游乐场同样的AppComponent。 它是根组件，随着应用的演变，它将变成一颗嵌套组件树。

app/app.module.ts

Defines AppModule, the root module that tells Angular how to assemble the application. Right now it declares only the AppComponent. Soon there will be more components to declare.

定义AppModule，根模块为 Angular 描述如何组装应用。 目前，它只声明了AppComponent。 不久，它将声明更多组件。

main.ts

Compiles the application with the JIT compiler and bootstraps the application's main module (AppModule) to run in the browser. The JIT compiler is a reasonable choice during the development of most projects and it's the only viable choice for a sample running in a live-coding environment like Plunker. You'll learn about alternative compiling and deployment options later in the documentation.

使即时 (JiT) 编译器用编译应用并且在浏览器中启动并运行应用。 对于大多数项目的开发，这都是合理的选择。而且它是在像 Plunker 这样的在线编程环境中运行例子的唯一选择。 你将在本文档中学习其他编译和开发选择。

Next Step

下一步

If you're new to Angular, we recommend staying on the learning path.

如果你是 Angular 初学者，建议根据学习路径学习。



Appendix: node and npm

附录：node 与 npm

Node.js and npm are essential to modern web development with Angular and other platforms. Node powers client development and build tools. The npm package manager, itself a node application, installs JavaScript libraries.

Node.js 和 npm 对使用 Angular 和其他平台进行现代网络开发是至关重要的。 Node 驱动客户端开发和构建工具。 npm 包管理器本身是 node 应用，用于安装 JavaScript 库。

Get them now if they're not already installed on your machine.

如果你的电脑没有安装它们， 立刻安装它们。

Verify that you are running node v4.x.x or higher and npm 3.x.x or higher by running the commands node -v and npm -v in a terminal/console window. Older versions produce errors.

在终端/控制器窗口运行命令node -v和npm -v，来确认你运行的 node 是v4.x.x或更高，npm 为3.x.x或更高。 老版本会产生错误。

We recommend nvm for managing multiple versions of node and npm. You may need nvm if you already have projects running on your machine that use other versions of node and npm.

我们推荐使用 nvm 来管理多版本 node 和 npm。 如果你的电脑上已经有使用其他版本 node 和 npm 的项目，你可能需要 nvm。

Appendix: Why develop locally

附录：为何在本地开发

Live coding in the browser is a great way to explore Angular.

在浏览器中在线编程是很好的探索 Angular 的方法。

Links on almost every documentation page open completed samples in the browser. You can play with the sample code, share your changes with friends, and download and run the code on your own machine.

几乎每章文档里面的链接都在浏览器中打开完整的例子。 你可以用这些代码做实验，或者与朋友共享你的修改，或者下载并在你自己的电脑上运行这些代码。

The QuickStart shows just the AppComponent file. It creates the equivalent of app.module.ts and main.ts internally for the playground only. so the reader can discover Angular without distraction. The other samples are based on the QuickStart seed.

快速起步仅仅展示了AppComponent文件。 它在内部创建了只为游乐场而准备的等价app.module.ts和main.ts。 所以读者可以在零干扰的情况下探索 Angular。 其他例子是基于 《快速起步》种子的。

As much fun as this is ...

虽然有这么多的乐趣，但是...

Use the live coding environment as a playground, a place to try the documentation samples and experiment on your own. It's the perfect place to reproduce a bug when you want to file a documentation issue or file an issue with Angular itself.

把在线编程环境当做游乐场，一个尝试文档例子和自己做实验的地方。 当你想要提交关于文档的问题或者 提交关于 Angular 自身的问题时， 它是重现错误的完美地方。

For real development, we strongly recommend developing locally.

对于现实项目开发，我们强烈推荐在本地开发。