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%;
}

看起来不错!

下一步是什么?

这就是所有你期望在“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文件,因此您无需手动添加任何

你可能感兴趣的:(Angular)