准备从 AngularJS 升级link

Setup for upgrading from AngularJSlink

本指南讲的是如何在你自己的机器上进行本地化开发。 利用 github 上的《快速上手》种子在你的电脑上搭建一个新项目是很快很容易的。

This guide describes how to develop locally on your own machine. Setting up a new project on your machine is quick and easy with the QuickStart seed on github.

前提条件：确保你已经安装好了 Node.js® 和 npm。

Prerequisite: Make sure you have Node.js® and npm installed.

克隆link

Clonelink

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

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

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

下载link

Downloadlink

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

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

      
        content_copy
      
      cd quickstart
npm install
npm start
    

删除非必需文件（可选）link

Delete non-essential files (optional)link

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

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

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

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

OS/X (bash)link

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

Windowslink

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

《快速上手》种子库里都有什么？link

What's in the QuickStart seed?link

《快速上手》种子 提供了一个基本的《快速上手》游乐场应用，以及进行本地开发的其它必要文件。 所以，你电脑里的项目目录中有更多文件，其中的大部分你都会在稍后学到。

The QuickStart seed provides a basic QuickStart playground application and other files necessary for local development. Consequently, there are many files in the project folder on your machine, most of which you can learn about later.

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

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

      
        content_copy
      
      import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }
    

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

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

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

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

src/ 目录下的文件才“属于”你的 app。 除非明确指出，否则教程中添加的 TypeScript，HTML 和 CSS 文件都在 src/ 目录下， 大多数在 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/ 目录文件详情如下：

The following are all in src/

附录：用 IE 进行本地化开发link

Appendix: Develop locally with IElink

如果你使用 ng serve 进行本地化 Angular 开发，就会自动在浏览器和本地开发服务器之间建立一个 websocket 连接，这样，在代码发生变化时，浏览器就会自动刷新。

If you develop angular locally with ng serve, a websocket connection is set up automatically between browser and local dev server, so when your code changes, the browser can automatically refresh.

在 Windows 上，默认情况下，每个应用最多只能有 6 个 websocket 连接，参见 MSDN 上的 WebSocket 设置。 所以，当 IE 刷新时（手动刷新或由 ng serve 自动刷新），websocket 可能无法正常关闭。当 websocket 连接数超过上限时，就会抛出一个 SecurityError 异常。这种错误不会影响 Angular 应用，你可以重启 IE 来清除此异常或在 Windows 注册表中加大这个上限。

In Windows, by default, one application can only have 6 websocket connections, MSDN WebSocket Settings. So when IE is refreshed (manually or automatically by ng serve), sometimes the websocket does not close properly. When websocket connections exceed the limitations, a SecurityError will be thrown. This error will not affect the angular application, you can just restart IE to clear this error, or modify the windows registry to update the limitations.

附录：使用 fakeAsync()/async() 进行测试link

Appendix: Test using fakeAsync()/async()link

如果你使用 fakeAsync()/async() 辅助函数来运行单元测试（详情参见测试指南），就要在测试的准备文件中导入 zone.js/dist/zone-testing。

If you use the fakeAsync()/async() helper function to run unit tests (for details, read the Testing guide), you need to import zone.js/dist/zone-testing in your test setup file.

在以前版本的 Angular 中，下列文件曾被导入或添加到 html 文件中：

And in the earlier versions of Angular, the following files were imported or added in your html file:

      
        content_copy
      
      import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
    

你仍然可以分别导入这些文件，不过导入顺序很重要，你必须在 sync-test、async-test、fake-async-test 和 jasmine-patch 之前导入 proxy。还要注意在 jasmine-patch 之前导入 sync-test。所以，建议你只导入 zone-testing 而不要分别加载那些文件。

You can still load those files separately, but the order is important, you must import proxy before sync-test, async-test, fake-async-test and jasmine-patch. And you also need to import sync-test before jasmine-patch, so it is recommended to just import zone-testing instead of loading those separated files.