Angular快速入门

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

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

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

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

你也可以下载这个例子。

第1步。设置开发环境 

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

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

8.x5.x 通过运行node -vnpm -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!'

SRC /应用程序/ app.component.ts
content_copyexport class AppComponent {
  title = 'My First Angular App!';
}

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

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

SRC /应用程序/ app.component.css
content_copyh1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
QuickStart应用的输出

看起来不错!

下一步是什么?

这就是所有你期望在“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 在构建应用程序时自动添加所有文件jscss文件,因此您无需手动添加任何<script><link>标签。

karma.conf.js

运行时使用 的Karma测试运行器的单元测试配置ng test

main.ts

您的应用的主要入口点。使用JIT编译器编译应用程序 并引导应用程序的根模块(AppModule)在浏览器中运行。您还可以使用AOT编译器, 而无需通过将--aot标志附加ng buildng serve命令更改任何代码

polyfills.ts

不同的浏览器对Web标准有不同程度的支持。Polyfills有助于使这些差异正常化。你应该对非常安全的core-jszone.js,但一定要检查出的浏览器支持指南获取更多信息。

styles.css

你的全球风格在这里。大多数情况下,您需要在组件中使用本地样式以便于维护,但影响所有应用程序的样式需要位于中心位置。

test.ts

这是你的单元测试的主要入口点。它有一些可能不熟悉的自定义配置,但它不是你需要编辑的东西。

tsconfig.{app|spec}.json

用于Angular app(tsconfig.app.json)和单元测试(tsconfig.spec.json)的TypeScript编译器配置

tslint.json

TSLint和 Codelyzer的 其他Linting配置,在运行时使用ng lintLinting有助于保持代码风格的一致性。

根文件夹

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


©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页