使用Angular示例程序

跟着示例练习几遍您将获得更好的学习经验，使用我们的自定义 QuizzManiac 模板创建新项目，以快速使用Angular。此演示应用程序展示了Angular的几个特征。

在新建Angular项目使用实例程序

若要使用示例模板创建项目，请从”New Angular Project”向导中选择示例应用程序选项。

单击”完成”时，将创建基本的 Eclipse 项目骨架以及模板代码。在实际使用此项目之前，必须完成项目配置 – 这可能意味着下载和/或安装Node、npm、相应的 Angular CLI 版本，最后是项目的依赖项。您可以在”Terminal+”视图中观察详细进度。有关其他详细信息，请参阅了解Angular CLIS。

检查项目内容

项目完全设置完成后，让我们仔细看看它的一些关键内容：

src/应用程序文件夹

• 此文件夹包含项目的根模块（AppModule），该模块位于app.module.ts中 – 应用程序通过引导此模块启动。
• 这些模块附带Angular组件及其相应的模板和样式。组件类包含支持此视图的应用程序逻辑。组件的模板是一种 HTML 形式，它告诉Angular如何呈现组件。
• 最后，在 app.routes.ts 中定义的路由基于 URL 模式定义如何在应用程序中进行导航。

src / main. ts

此文件中的代码初始化应用程序运行的平台，然后使用该平台引导 AppModule。

. Angular – cli. json

我们的Angular支持基于Angular CLI。此文件包含有关如何构建、测试和部署 Angular 应用程序的设置和说明。有关详细信息，请参阅了解学习中心的AngularCLIS。

app / tsconfig. app. json tsconfig. json

tsconfig文件包含项目的 TypeScript 设置、控制源位置、JavaScript 目标（如 ES5 或 ES6）、编译、如何解析类型以及其他几个设置。可以在项目的 TypeScript 属性页面上配置其中几个属性。app/tsconfig.app.json扩展了 tsconfig.json，允许您在单个项目中共享多个 TypeScript 配置。你会发现类型脚本设置特定于测试在应用程序/tsconfig.spec.json，这也扩展了 tsconfig.json。

tslint. json

此文件包含许多 TypeScript lining 规则，其 linting 功能由 TSLint 提供。您可以手动编辑此文件以添加和删除规则，但编辑器中与 TSLint 相关的多个快速修复也允许您删除您认为没有用的规则。

package. json

这是另一个 TypeScript 特定文件，它主要包含项目的依赖项，列为 Node.js 模块及其相应的版本。package.json也包含其他关键项目元数据，例如项目的名称、描述和版本，以及在项目生命周期的不同阶段运行的脚本。

有关 TypeScript 和这些配置文件的详细了解，请参阅使用 TypeScript。

node_modules文件夹

此文件夹包含项目所依赖的所有节点包 – 这些包在package.json 中定义，并由npm 下载。

protractor. conf. js 和 e2e 文件夹

我们的模板项目使用 Protractor 和 Jasmine 这两个端到端测试框架来测试您的应用程序。测试框架在protractor.conf.js 中配置，而实际测试在 e2e 文件夹中。

运行和调试项目

右键单击资源管理器中的应用程序，然后选择“Run As > Angular Web Application“以生成和部署项目。加载应用后，浏览器会自动打开。

观察终端视图，该视图指示如何构建和部署应用，包括已部署资源的列表。

“服务器”视图列出了工作区中的所有Angular项目，包括部署状态。您可以选择停止并从这里启动服务器。

只需双击标尺区域，即可在 TypeScript、HTML 或 JavaScript 文件中放置断点。如果启动调试会话，应用程序将在中断点命中时暂停，您可以在所有文件中逐步浏览源，甚至 TypeScript。有关调试Angular应用程序的其他信息，请参阅本文档。

对应用程序进行更改

当应用正在运行时，无需重做运行序列即可进行多项更改。如果进行更改并保存它，则实时预览（在Angular应用程序中运行的技术）将检测更改，重新生成应用程序，并在浏览器中自动重新加载应用程序。

若要查看其工作原理，请运行应用程序并停留在浏览器中测验的打开页上。现在打开src/app/services/quizz.services.ts文件，将”A Sample Quizz”更改为”My Sample Quizz””。保存文件并观察拾取更改（您将在终端Terminal中看到活动），页面将自动重新加载，现在显示”My Sample Quizz””作为第一个测验。

使用 CodeLive 探索应用程序

如果未启用 CodeLive，则右键单击”服务器”视图中的项目，然后单击 CodeLive。启用后，您将在浏览器中看到覆盖在应用上的仪表板。您可以使用它来探索Angular应用程序，找出小部件层次结构，甚至在 IDE 中打开相应的源。所有您需要做的就是单击魔杖，然后将鼠标悬停在应用程序中的不同 UI 元素上。单击您感兴趣的元素以打开分层显示，您可以在其中打开 IDE 中的代码（TS、HTML 甚至 CSS）。