01gind-modulea 中文文档教程

Question

Angular QuickStart Source

此存储库包含 angular.io quickstart 的 TypeScript 源代码， 大多数文档示例的基础，并且可能是您应用程序的良好起点。

它已通过测试支持得到扩展，因此您可以立即开始编写测试。

这不是您申请的完美安排。 它不是为生产而设计的。 它的存在主要是为了让您快速开始学习 Angular 并制作原型

我们不太可能接受有关如何将此 QuickStart 发展成它不是的东西的建议。 在发布问题和 PR 之前请记住这一点。

Updating to a newer version of the Quickstart Repo

QuickStart 会不时地增强对新功能的支持或反映 官方风格指南的变化。

您可以按照以下说明将现有项目更新为最新的 QuickStart：

• Create a new project using the instructions below
• Copy the code you have in your project's main.ts file onto src/app/main.ts in the new project
• Copy your old app folder into src/app
• Delete src/app/main.ts if you have one (we now use src/main.ts instead)
• Copy your old index.html, styles.css and tsconfig.json into src/
• Install all your third party dependencies
• Copy your old e2e/ folder into e2e/
• Copy over any other files you added to your project
• Copy your old .git folder into your new project's root

现在您可以继续处理新项目。

Prerequisites

Node.js 和 npm 是 Angular 开发必不可少的。

如果您的计算机上尚未安装它，请立即获取。

验证您至少正在运行 node v4.xx 和 npm 3.xx 通过在终端/控制台窗口中运行 node -v 和 npm -v。 旧版本会产生错误。

我们推荐使用 nvm 来管理多个版本的节点和 npm。

Create a new project based on the QuickStart

将这个 repo 克隆到新的项目文件夹中（例如，my-proj）。

git clone https://github.com/angular/quickstart  my-proj
cd my-proj

我们无意更新 angular/quickstart 上的源代码。 丢弃 .git 文件夹。

rm -rf .git  # OS/X (bash)
rd .git /S/Q # windows

Delete non-essential files (optional)

您可以快速删除涉及测试和 QuickStart 存储库维护的非必要文件 （包括所有与 git 相关的工件，例如 .git 文件夹和 .gitignore！） 通过在项目文件夹中输入以下命令：

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

Create a new git repo

您可以现在开始编写代码，并在完成后将其全部丢弃。 如果您希望在源代码管理下保留您的工作，请考虑采取以下步骤。

将此项目初始化为 local git repo 并进行第一次提交：

git init
git add .
git commit -m "Initial commit"

从 QuickStart 存储库中恢复已删除的 .gitignore 如果您在删除非必要文件步骤中丢失了它。

在您选择的服务上为此项目创建一个远程存储库。

获取它的地址（例如 https://github.com//my-proj.git）并推送 local repo 到遥控器。

git remote add origin <repo-address>
git push -u origin master

Install npm packages

请参阅上面的 npm 和 nvm 版本说明

安装 package.json 中描述的 npm 包并验证它是否有效：

npm install
npm start

在不支持服务器的 Bash for Windows 中不起作用截至 2017

年 1 月。npm start 命令首先编译应用程序， 然后同时重新编译并运行 lite-server。 编译器和服务器都监视文件更改。

使用 Ctrl-C 手动关闭它。

您已准备好编写您的应用程序。

npm scripts

我们在 package.json 中定义的 npm 脚本中捕获了许多最有用的命令：

• npm start - runs the compiler and a server at the same time, both in "watch mode".
• npm run build - runs the TypeScript compiler once.
• npm run build:w - runs the TypeScript compiler in watch mode; the process keeps running, awaiting changes to TypeScript files and re-compiling when it sees them.
• npm run serve - runs the lite-server, a light-weight, static file server, written and maintained by John Papa and Christopher Martin with excellent support for Angular apps that use routing.

以下是与测试相关的脚本：

• npm test - compiles, runs and watches the karma unit tests
• npm run e2e - compiles and run protractor e2e tests, written in Typescript (*e2e-spec.ts)

Testing

QuickStart 文档不讨论测试。 这个 repo 添加了 karma/jasmine 单元测试和量角器端到端测试支持。

这些工具是根据下面描述的特定约定配置的。

同时运行应用程序、单元测试和 e2e 测试是不明智的，而且几乎不可能。 我们建议您在启动另一个之前先关闭一个。

Unit Tests

TypeScript 单元测试通常位于 src/app 文件夹中。 它们的文件名必须以 .spec.ts 结尾。

查找示例 src/app/app.component.spec.ts。 根据需要添加更多 .spec.ts 文件； 我们配置了业力来找到它们。

使用 npm test 运行它

该命令首先编译应用程序，然后同时重新编译并运行 karma 测试运行程序。 编译器和 karma 都监视（不同的）文件更改。

使用 Ctrl-C 手动关闭它。

测试运行程序输出出现在终端窗口中。 我们可以实时更新我们的应用程序和我们的测试，密切关注控制台是否有损坏的测试。 Karma 偶尔会感到困惑，通常需要关闭其浏览器甚至关闭命令 (Ctrl-C) 和 重新启动它。 不用担心; 这非常快。

End-to-end (E2E) Tests

E2E 测试位于 e2e 目录中，与 src 文件夹并排。 它们的文件名必须以 .e2e-spec.ts 结尾。

查找示例 e2e/app.e2e-spec.ts。 根据需要添加更多的 .e2e-spec.js 文件（尽管对于小项目来说一个通常就足够了）； 我们配置 Protractor 来找到它们。

此后，使用 npm run e2e 运行它们。

该命令首先编译，然后同时在 localhost:8080 启动 lite-server 并启动量角器。

通过/失败测试结果显示在终端窗口的底部。 自定义报告程序（参见 protractor.config.js）生成一个 ./_test-output/protractor-results.txt 文件 哪个更容易阅读； 此文件已从源代码管理中排除。

使用 Ctrl-C 手动关闭它。