Angular 7.0 快速上手指南

2024-02-19 07:08:38

Angular 7.0 是一款功能强大的 JavaScript 框架，可用于构建单页应用程序 (SPA)。它提供了一系列工具和特性，帮助您轻松创建和维护复杂的 Web 应用程序。

Angular 7.0 快速上手

安装 Angular CLI

Angular CLI 是一个命令行工具，可帮助您创建和管理 Angular 项目。要安装 Angular CLI，请运行以下命令：
```
npm install -g @angular/cli
```
创建新项目

使用 Angular CLI 可以轻松创建新的 Angular 项目。要创建新项目，请运行以下命令：
```
ng new my-project
```
进入项目目录

创建项目后，您需要进入项目目录。要进入项目目录，请运行以下命令：
```
cd my-project
```
运行项目

要运行项目，请运行以下命令：
```
ng serve
```
这将启动一个本地开发服务器，您可以在浏览器中访问该服务器。默认情况下，该服务器将在端口 4200 上运行。
创建组件

组件是 Angular 应用程序的基本构建块。要创建组件，请运行以下命令：
```
ng generate component my-component
```
这将在项目中创建一个名为 my-component 的新组件。

将组件添加到模块中

组件创建后，您需要将其添加到模块中。要将组件添加到模块中，请打开 app.module.ts 文件，然后将以下代码添加到 imports 数组中：

import { MyComponent } from './my-component/my-component.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    MyComponent
  ],
  declarations: [
    AppComponent,
    MyComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

在模板中使用组件

将组件添加到模块后，您可以在模板中使用它。要使用组件，请打开 app.component.html 文件，然后将以下代码添加到模板中：
```
<my-component></my-component>
```
测试组件

组件创建后，您可以使用 ng test 命令对其进行测试。要运行测试，请运行以下命令：
```
ng test
```
这将运行项目中的所有测试。