Angular 14 Material 快速入门指南

Angular Material 是一个基于 Angular 的 UI 组件库，它可以帮助开发者快速构建高性能和美观的网页应用。本指南将为您介绍如何在 Angular 14 中使用 Material。

安装 Angular CLI

首先，您需要安装 Angular CLI，它是一个命令行工具，用于初始化、开发、测试、打包 Angular 应用。

npm install -g @angular/cli

创建新项目

使用 Angular CLI 创建一个新的 Angular 项目：

ng new my-material-app

安装 Angular Material

进入新创建的项目目录，并安装 Angular Material：

ng add @angular/material

根据需要，您可以安装特定主题：

ng add @angular/material/mMoment

在应用中使用 Angular Material

在 app.module.ts 文件中，导入 Angular Material 的模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在，您可以在组件中使用 Material 组件了。

更多资源

如果您需要更多关于 Angular Material 的信息，请访问我们的Angular Material 官方文档。

Angular Material Logo

示例组件

以下是一个使用 Angular Material Button 组件的简单示例：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My Material App';
}

<!-- app.component.html -->
<button mat-button color="primary">Click Me!</button>

以上就是在 Angular 14 中使用 Angular Material 的快速入门指南。希望这个指南对您有所帮助！

返回首页