好的工具使应用程序开发更快速,更容易维护,比手动完成任何事情都要方便。
该角CLI是一个命令行界面工具,可以创建一个项目,添加文件,并执行各种不断发展的任务,如测试,捆绑和部署。
本指南的目标是使用Angular CLI在TypeScript中构建和运行一个简单的Angular应用程序,同时遵守有助于每个Angular项目的风格指南建议。
到本章结束时,您将通过CLI了解开发的基本知识,并为这些文档样本和实际应用程序奠定基础。
你也可以下载这个例子。
第1步。设置开发环境
在你做任何事情之前,你需要设置你的开发环境。
如果Node.js®和npm不在您的机器上,请安装Node.js®和npm。
8.x
5.x
通过运行node -v
并npm -v
在终端/控制台窗口中验证您是否正在运行至少Node.js版本或更高版本以及npm版本或更高版本。旧版本会产生错误,但新版本可以。
然后在全球范围内安装Angular CLI。
content_copynpm install -g @angular/cli
第2步。创建一个新的项目
打开一个终端窗口。
通过运行以下命令生成新项目和默认应用程序:
content_copyng new my-app
Angular CLI安装必要的npm包,创建项目文件,并用一个简单的默认应用程序填充项目。这可能需要一些时间。
您可以使用该ng add
命令将预先打包的功能添加到新项目。该ng add
命令通过在指定的包中应用原理图来转换项目。有关更多信息,请参阅Angular CLI文档。
Angular Material提供典型应用布局的示意图。有关详细信息,请参阅角度材料文档。
第3步:服务应用程序
转到项目目录并启动服务器。
content_copycd my-app
ng serve --open
该ng serve
命令启动服务器,监视您的文件,并在您对这些文件进行更改时重建应用程序。
使用--open
(或只是-o
)选项会自动打开您的浏览器http://localhost:4200/
。
您的应用使用以下消息迎接您:
第4步:编辑您的第一个Angular组件
CLI为您创建了第一个Angular组件。这是根组件,它被命名app-root
。你可以找到它./src/app/app.component.ts
。
打开组件文件并将title
属性从更改'app'
为'My First Angular App!'
。
content_copyexport class AppComponent {
title = 'My First Angular App!';
}
浏览器会自动重新加载修订后的标题。这很好,但它可能会更好看。
打开src/app/app.component.css
并给组件一些样式。
content_copyh1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
看起来不错!
下一步是什么?
这就是所有你期望在“Hello,World”应用程序中做的事情。
您已准备好参加英雄之旅教程,并构建一个小型应用程序,演示您可以使用Angular创建的伟大事物。
或者,您可以多花点时间了解您的全新项目中的文件。
项目文件审查
Angular CLI项目是快速实验和企业解决方案的基础。
你应该检查的第一个文件是README.md
。它有关于如何使用CLI命令的一些基本信息。无论何时您想了解更多关于Angular CLI如何工作的信息,请务必访问 Angular CLI存储库和 Wiki。
一些生成的文件可能对您不熟悉。
该src
文件夹
你的应用居住在该src
文件夹中。所有Angular组件,模板,样式,图像以及您应用程序需要的任何其他内容都会转到此处。此文件夹以外的任何文件都旨在支持构建您的应用程序。
文件 | 目的 |
---|---|
| 定义了 |
| 定义 |
| 一个文件夹,您可以在构建应用程序时将图像和任何其他内容进行批量复制。 |
| 该文件夹包含每个目标环境的一个文件,每个文件导出用于应用程序的简单配置变量。当您构建应用程序时,这些文件将被即时替换。您可能使用不同的API端点进行开发,而不是使用不同的API端点进行生产或使用不同的分析令牌。你甚至可以使用一些模拟服务。无论哪种方式,CLI都涵盖了你。 |
| 用于在不同前端工具之间共享目标浏览器的配置文件。 |
| 每个网站都希望在书签栏上看起来不错。开始使用您自己的Angular图标。 |
| 当有人访问您的网站时提供的主要HTML页面。大多数情况下,你永远不需要编辑它。CLI 在构建应用程序时自动添加所有文件 |
| 运行时使用 的Karma测试运行器的单元测试配置 |
| 您的应用的主要入口点。使用JIT编译器编译应用程序 并引导应用程序的根模块( |
| 不同的浏览器对Web标准有不同程度的支持。Polyfills有助于使这些差异正常化。你应该对非常安全的 |
| 你的全球风格在这里。大多数情况下,您需要在组件中使用本地样式以便于维护,但影响所有应用程序的样式需要位于中心位置。 |
| 这是你的单元测试的主要入口点。它有一些可能不熟悉的自定义配置,但它不是你需要编辑的东西。 |
| 用于Angular app( |
| TSLint和 Codelyzer的 其他Linting配置,在运行时使用 |
根文件夹
该src/
文件夹只是项目根文件夹内的项目之一。其他文件可帮助您构建,测试,维护,记录和部署应用程序。这些文件放在旁边的根文件夹中src/
。
文件 | 目的 |
---|---|
| 内部 |
|
|
| 编辑器的简单配置,以确保使用您的项目的每个人都具有相同的基本配置。大多数编辑支持一个 |
| Git配置以确保自动生成的文件未提交到源代码管理。 |
| Angular CLI的配置。在这个文件中,您可以设置多个默认值,并配置项目生成时包含的文件。如果您想了解更多信息,请查看官方文档。 |
|
|
| 量角器 的端到端测试配置,在运行时使用 |
| 您的项目的基本文档,预填充CLI命令信息。确保使用项目文档对其进行增强,以便任何检查回购的人都可以构建您的应用程序! |
| TypeScript编译器配置为您的IDE选择并为您提供有用的工具。 |
| 掉毛配置TSLint连同 Codelyzer,用于在运行时 |