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有助于保持代码风格的一致性。