augular入门

好的工具使应用程序开发更快速，更容易维护，比手动完成任何事情都要方便。

该角CLI是一个命令行界面工具，可以创建一个项目，添加文件，并执行各种不断发展的任务，如测试，捆绑和部署。

本指南的目标是使用Angular CLI在TypeScript中构建和运行一个简单的Angular应用程序，同时遵守有助于每个Angular项目的风格指南建议。

到本章结束时，您将通过CLI了解开发的基本知识，并为这些文档样本和实际应用程序奠定基础。

你也可以下载这个例子。

第1步。设置开发环境 

在你做任何事情之前，你需要设置你的开发环境。

如果Node.js®和npm不在您的机器上，请安装Node.js®和npm。

8.x5.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_copy

1.  
   cd my-app
2.  
   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!'。

SRC /应用程序/ app.component.ts

content_copy

1.  
   export class AppComponent {
2.  
   title = 'My First Angular App!';
3.  
   }

浏览器会自动重新加载修订后的标题。这很好，但它可能会更好看。

打开src/app/app.component.css并给组件一些样式。

SRC /应用程序/ app.component.css

content_copy

1.  
   h1 {
2.  
   color: #369;
3.  
   font-family: Arial, Helvetica, sans-serif;
4.  
   font-size: 250%;
5.  
   }

看起来不错！

下一步是什么？

这就是所有你期望在“Hello，World”应用程序中做的事情。

您已准备好参加英雄之旅教程，并构建一个小型应用程序，演示您可以使用Angular创建的伟大事物。

或者，您可以多花点时间了解您的全新项目中的文件。

项目文件审查

Angular CLI项目是快速实验和企业解决方案的基础。

你应该检查的第一个文件是README.md。它有关于如何使用CLI命令的一些基本信息。无论何时您想了解更多关于Angular CLI如何工作的信息，请务必访问 Angular CLI存储库和 Wiki。

一些生成的文件可能对您不熟悉。

该src文件夹

你的应用居住在该src文件夹中。所有Angular组件，模板，样式，图像以及您应用程序需要的任何其他内容都会转到此处。此文件夹以外的任何文件都旨在支持构建您的应用程序。

SRC

应用

app.component.css

app.component.html

app.component.spec.ts

app.component.ts

app.module.ts

资产

.gitkeep

环境

environment.prod.ts

environment.ts

browserslist

favicon.ico的

的index.html

karma.conf.js

main.ts

polyfills.ts

styles.css的

test.ts

tsconfig.app.json

tsconfig.spec.json

tslint.json

文件	目的
app/app.component.{ts,html,css,spec.ts}	定义了AppComponent一个HTML模板，CSS样式表和一个单元测试。随着应用程序的发展，它将成为嵌套组件树的根组件。
app/app.module.ts	定义AppModule，告诉Angular如何组装应用程序的根模块。现在它只声明了AppComponent。很快就会有更多的组件需要声明。
assets/*	一个文件夹，您可以在构建应用程序时将图像和任何其他内容进行批量复制。
environments/*	该文件夹包含每个目标环境的一个文件，每个文件导出用于应用程序的简单配置变量。当您构建应用程序时，这些文件将被即时替换。您可能使用不同的API端点进行开发，而不是使用不同的API端点进行生产或使用不同的分析令牌。你甚至可以使用一些模拟服务。无论哪种方式，CLI都涵盖了你。
browserslist	用于在不同前端工具之间共享目标浏览器的配置文件。
favicon.ico	每个网站都希望在书签栏上看起来不错。开始使用您自己的Angular图标。
index.html	当有人访问您的网站时提供的主要HTML页面。大多数情况下，你永远不需要编辑它。CLI 在构建应用程序时自动添加所有文件js和css文件，因此您无需手动添加任何<script>或<link>标签。
karma.conf.js	运行时使用 的Karma测试运行器的单元测试配置ng test。
main.ts	您的应用的主要入口点。使用JIT编译器编译应用程序 并引导应用程序的根模块（AppModule）在浏览器中运行。您还可以使用AOT编译器， 而无需通过将--aot标志附加到ng build和ng serve命令来更改任何代码。
polyfills.ts	不同的浏览器对Web标准有不同程度的支持。Polyfills有助于使这些差异正常化。你应该对非常安全的core-js和zone.js，但一定要检查出的浏览器支持指南获取更多信息。
styles.css	你的全球风格在这里。大多数情况下，您需要在组件中使用本地样式以便于维护，但影响所有应用程序的样式需要位于中心位置。
test.ts	这是你的单元测试的主要入口点。它有一些可能不熟悉的自定义配置，但它不是你需要编辑的东西。
tsconfig.{app|spec}.json	用于Angular app（tsconfig.app.json）和单元测试（tsconfig.spec.json）的TypeScript编译器配置。
tslint.json	TSLint和 Codelyzer的 其他Linting配置，在运行时使用ng lint。Linting有助于保持代码风格的一致性。

根文件夹

该src/文件夹只是项目根文件夹内的项目之一。其他文件可帮助您构建，测试，维护，记录和部署应用程序。这些文件放在旁边的根文件夹中src/。

我的应用程序内

E2E

SRC

app.e2e-spec.ts

app.po.ts

tsconfig.e2e.json

protractor.conf.js

node_modules / ...

SRC / ...

karma.conf.js

.editorconfig

的.gitignore

angular.json

的package.json

README.md

tsconfig.json

tslint.json

文件	目的
e2e/	内部e2e/进行端到端测试。他们不应该在里面，src/因为e2e测试真的是一个单独的应用程序，只是碰巧测试你的主应用程序。这也是他们拥有自己的原因tsconfig.e2e.json。
node_modules/	Node.js创建该文件夹并将所有第三方模块列入 package.json其中。
.editorconfig	编辑器的简单配置，以确保使用您的项目的每个人都具有相同的基本配置。大多数编辑支持一个.editorconfig文件。有关更多信息，请参阅http://editorconfig.org。
.gitignore	Git配置以确保自动生成的文件未提交到源代码管理。
angular.json	Angular CLI的配置。在这个文件中，您可以设置多个默认值，并配置项目生成时包含的文件。如果您想了解更多信息，请查看官方文档。
package.json	npm配置列出您的项目使用的第三方软件包。您也可以在这里添加您自己的自定义脚本。
protractor.conf.js	量角器 的端到端测试配置，在运行时使用ng e2e。
README.md	您的项目的基本文档，预填充CLI命令信息。确保使用项目文档对其进行增强，以便任何检查回购的人都可以构建您的应用程序！
tsconfig.json	TypeScript编译器配置为您的IDE选择并为您提供有用的工具。
tslint.json	掉毛配置TSLint连同 Codelyzer，用于在运行时ng lint。Linting有助于保持代码风格的一致性。