【angular v5中文文档】一、快速上手

代码简单说

发布于 2026-06-16 16:05:27

1540

文章被收录于专栏：代码简单说代码简单说

快速上手

步骤1：设置开发环境

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

如果你的机器上尚未安装Node.js®和npm，请进行安装。

在终端/控制台窗口中运行node -v和npm -v，验证你运行的至少是Node.js 6.9.x和npm 3.x.x版本。旧版本可能会产生错误，较新版本则没有问题。

然后全局安装Angular CLI。

npm install -g @angular/cli

步骤2：创建新项目

打开终端窗口。

通过运行以下命令生成一个新项目和基础应用程序：

ng new my-app

请耐心等待。设置新项目需要一些时间，大部分时间花在安装npm包上。

步骤3：运行应用程序

进入项目目录并启动服务器。

cd 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/app.component.ts
export class AppComponent {
  title = 'My First Angular App!'; 
}

浏览器会自动重新加载，显示修改后的标题。这很不错，但它看起来还可以更好。

打开src/app/app.component.css，为组件添加一些样式。

/* src/app/app.component.css */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%; 
}

欢迎使用我的第一个Angular应用程序！！

看起来很不错！

接下来做什么？

这差不多就是你在一个“Hello, World”应用程序中期望做的所有事情。

你已经准备好学习《英雄之旅教程》，并构建一个小型应用程序，展示你可以用Angular构建的出色功能。

或者你也可以再花点时间了解一下你全新项目中的文件。

项目文件审查

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

你首先应该查看的文件是README.md。它包含一些关于如何使用CLI命令的基本信息。如果你想进一步了解Angular CLI的工作原理，请务必访问Angular CLI仓库和维基页面。

有些生成的文件你可能不太熟悉。

`src`文件夹

你的应用程序位于src文件夹中。所有Angular组件、模板、样式、图像以及应用程序所需的任何其他内容都放在这里。此文件夹之外的任何文件都是为了支持构建你的应用程序。

src
├── app
│   ├── app.component.css
│   ├── app.component.html
│   ├── app.component.spec.ts
│   ├── app.component.ts
│   └── app.module.ts
├── assets
│   └── .gitkeep
├── environments
│   ├── environment.prod.ts
│   └── environment.ts
├── favicon.ico
├── index.html
├── main.ts
├── polyfills.ts
├── styles.css
├── test.ts
├── tsconfig.app.json
└── tsconfig.spec.json

文件	用途
app/app.component.{ts,html,css,spec.ts}	定义AppComponent，以及一个HTML模板、CSS样式表和一个单元测试。随着应用程序的发展，它是将成为嵌套组件树的根组件。
app/app.module.ts	定义AppModule，即根模块，它告诉Angular如何组装应用程序。目前它只声明了AppComponent。很快就会有更多组件需要声明。
assets/*	一个文件夹，你可以在其中放置图像和任何其他在构建应用程序时将被全部复制的内容。
environments/*	此文件夹为每个目标环境包含一个文件，每个文件导出在应用程序中使用的简单配置变量。在构建应用程序时，这些文件会被动态替换。你在开发环境中使用的API端点可能与生产环境不同，或者可能使用不同的分析令牌。你甚至可能使用一些模拟服务。无论哪种情况，CLI都能满足你的需求。
favicon.ico	每个网站都希望在书签栏中看起来美观。用你自己的Angular图标开始吧。
index.html	当有人访问你的网站时提供的主HTML页面。大多数情况下，你永远不需要编辑它。CLI在构建应用程序时会自动添加所有js和css文件，所以你永远不需要在这里手动添加任何<script>或<link>标签。
main.ts	你的应用程序的主要入口点。使用JIT编译器编译应用程序，并引导应用程序的根模块（AppModule）在浏览器中运行。你也可以通过在ng build和ng serve命令后附加--aot标志来使用AOT编译器，而无需更改任何代码。
polyfills.ts	不同的浏览器对网络标准的支持程度不同。Polyfill有助于规范这些差异。使用core-js和zone.js应该是比较安全的，但请务必查看浏览器支持指南以获取更多信息。
styles.css	你的全局样式放在这里。大多数情况下，为了便于维护，你会希望在组件中使用局部样式，但影响整个应用程序的样式需要放在一个中心位置。
test.ts	这是单元测试的主要入口点。它有一些可能不熟悉的自定义配置，但这不是你需要编辑的内容。
tsconfig.{app\|spec}.json	Angular应用程序（tsconfig.app.json）和单元测试（tsconfig.spec.json）的TypeScript编译器配置。

根文件夹

src/文件夹只是项目根文件夹中的其中一项。其他文件可帮助你构建、测试、维护、记录和部署应用程序。这些文件与src/文件夹一起放在根文件夹中。

my-app
├── e2e
│   ├── app.e2e-spec.ts
│   ├── app.po.ts
│   └── tsconfig.e2e.json
├── node_modules/...
├── src/...
├── .angular-cli.json
├── .editorconfig
├── .gitignore
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── README.md
├── tsconfig.json
└── tslint.json

文件	用途
e2e/	端到端测试存放在e2e/文件夹中。它们不应该放在src/文件夹内，因为端到端测试实际上是一个单独的应用程序，只是恰好用于测试你的主应用程序。这也是它们有自己的tsconfig.e2e.json的原因。
node_modules/	Node.js创建此文件夹，并将package.json中列出的所有第三方模块放在其中。
.angular-cli.json	Angular CLI的配置文件。在这个文件中，你可以设置一些默认值，还可以配置在构建项目时包含哪些文件。如果你想了解更多信息，请查看官方文档。
.editorconfig	用于配置编辑器的简单文件，确保使用你项目的每个人都有相同的基本配置。大多数编辑器都支持.editorconfig文件。更多信息请参见http://editorconfig.org 。
.gitignore	Git配置文件，确保自动生成的文件不会被提交到版本控制系统中。
karma.conf.js	Karma测试运行器的单元测试配置，在运行ng test时使用。
package.json	npm配置文件，列出你的项目使用的第三方包。你也可以在这里添加自己的自定义脚本。
protractor.conf.js	Protractor的端到端测试配置，在运行ng e2e时使用。
README.md	项目的基本文档，预先填充了CLI命令信息。确保用项目文档对其进行补充，以便任何查看代码库的人都能构建你的应用程序！
tsconfig.json	供IDE使用的TypeScript编译器配置，以便为你提供有用的工具支持。
tslint.json	TSLint和Codelyzer的代码检查配置，在运行ng lint时使用。代码检查有助于保持代码风格的一致性。