下载APP

基于Angular13和Angular Material构建一个Angular 应用详解

简介

Angular 作为三大主流框架之一，它是一个基于Typescript构建的开发平台。一个基于组件的框架，涵盖了路由、表单、客户端-服务端通信等强大的功能。

Angular Material 作为Google开发CSS框架功能也十分的强大，与Angular相搭配可以轻松的构建出一个Web应用。相比其他的CSS框架例如Bootstrap、ElementUI、Ant等框架，Material的流行程度在国内可能并不高，但它的功能还是十分的强大，UI设计也很美观。尤其是它在样式上的开放程度是极高的，甚至可以利用它Component Develop Kit进行组件的自定义，只要对cdk理解的足够深入甚至可以将组件改造的成任意你想要的样子。

开始搭建

安装Anglar CLI

Angular CLI的安装十分简单：

# 在不指定version时，默认全局安装最新版本
npm install -g @angular/cli@version

Angular CLI 简介

下面我们来介绍一下Angular常用的一些命令吧！想要了解其他命令的小伙伴可到Angular官网进行查阅Angular CLI。

  • ng version: 查看当前angular版本

    这里小伙伴要注意了在项目路径下执行此命令显示的是该项目所使用的angular版本，在普通目录下执行时显示的为本机全局安装的版本。

  • ng new: 创建新的Angular项目

    ng new 命令后还可以使用一些参数配置来自定义我们需要创建的项目。

    • --prefix: Component（组件）选择器前缀，默认为app。
    • --routing: 为AppModule创建一个RoutingModule
    • --skip-tests: 初始化项目时，不生成测试文件(*.spec.ts)，默认为false
    • --style: 指定样式文件类型，可选值为常见的样式文件扩展名（css,scss,less,sass）
    • --create-application: 创建应用，默认为true，应用会创建在src目录下。当值为false时，仅创建一个空的workspace，应用则可通过ng generate applicaiton [name]来创建，此时可创建多个应用在projects目录下。

  • ng serve: 启动命令

    可使用--port=4300来改变启动的端口，以方便多个项目同时运行。

  • ng generate

    ng generate为最常用同时也是最能提升开发效率的命令可以用来生成项目中常用的application、module、component、service、directive、pipe、class等angular schematic。

    语法格式为ng generate [schematic] [name],schematic为上面所提及的angular的各类文件类型，name为文件名。在angular的命名规则中，此命令所生成的组件默认在app文件夹下，且生成的文件都会以name.schematic.extension来命名。

    例如我们来生成一个book-store的Component，当执行ng generate component book-list也可以简写为ng g c book-list，我们会在app文件夹下默认生成一个book-list文件夹且其中包含以下文件：

    • book-list.compoennt.ts
    • book-list.component.spec.ts
    • book-list.component.html
    • book-list.component.scss

    当然，我们也可以给它加一点参数，例如当命令修改为ng g c components/book-list --style=sass --skip-tests=true。执行后我们会发现，这些组件并没有直接生成在app目录下而是生成在components目录下，并且文件也有所不同，没有了测试文件，样式文件也修改为sass。

  • ng add：用来自动集成一些angular组件包，与用npm不同的是它还可以帮你配置好新的包。

创建项目

我们一起来动手试一试吧！我们来创建一个叫book-store的项目。 ng new book-store --style=scss --routing=true --skip-tests=true。 命令执行完成后，我们的terminal自动会输出安装的文件：

iShot_2023-02-11_16.14.30.png

我们可以看到样式文件采用了scss，且并未生成测试文件spec.ts，而且自动生成了app-routing.module.ts。我们再来生成一个对比的demo项目，ng new demo --style=sass --routing=false，执行后，输出如下，它并不会生成app-routing.module.ts，且样式文件为sass，并且自动生成测试文件spec.ts

iShot_2023-02-11_16.22.45.png

OK!我们继续，创建项目后会自动执行npm install将项目需要的依赖包安装好，执行ng serve启动项目，我们来访问一下localhost:4200，我们能看到Angular默认生成的主页。

iShot_2023-02-11_16.29.11.png

添加Angular Material

执行ng add @angular/material:

iShot_2023-02-11_16.32.26.png 默认会根据angular版本匹配@angular/material的版本，这里我们输入Y。

iShot_2023-02-11_16.34.35.png 我们可以根据自己的喜好来选择一个主题，当然如果你已经熟练掌握Angular Material，可以选择Custom自己来定义一个主题。

iShot_2023-02-11_16.36.56.png

选择主题后，我们可以根据需要来选择是否使用Angular Material的字体。

iShot_2023-02-11_16.38.13.png

是否配置Angular Annimation。

iShot_2023-02-11_16.39.07.png

安装成功后，你可以看到修改了哪些文件:

  • package.json
  • app.module.ts
  • angular.json,
  • ndex.html
  • style.scss

我们注意到package.json中不仅添加了@angular/material的组件包，还添加了@angular/cdk这个包。angular.json中则在styles下引入的刚刚选择的主题样式文件。而在style.scss中则加入了一些基础的整体性样式。app.module.ts中加入了BrowserAnnimationModule。

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: Roboto,"Helvetica Neue", sans-serif;
}

这个时候，基础配置已经完成，但我们还不能使用Angular Material的基础组件进行开发。Angular Material的组件包是按需加载，即只引入需要的模块和组件来使用。 在此之前，由于这些组件在项目的各个模块中可能都需要使用，但不排除有些模块可能不需要。我们可以利用Angular的module进行模块化的引入。我们创建一个shared.module.ts来引入一些公共的模块，在这里我们可以把Angular Material中的模块在其中进行引入，这样我们在需要使用的模块中只需要引入shared.module就可以使用Angular Material中的组件进行开发了。 执行ng g m shared创建共享模块，我们来引入一些Angular Material的模块试试，每一个模块的使用方法可以在Angular Material的官网找到。我们来添加一个ButtonModule,CardModule。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';

export const ANGULAR_MATERIAL_LIBS = [
  MatButtonModule,
  MatCardModule
];

@NgModule({
  imports: [
    CommonModule,
    ANGULAR_MATERIAL_LIBS
  ],
  exports: [ANGULAR_MATERIAL_LIBS]
})
export class SharedModule { }

注：我们在实际项目中可能会通过NPM来安装各种各样的第三方包，为了让引入更为清晰，可读性更高，我们将Angular Material官方的模块引入统一放在一个数组中。

我们来创建一个简单的购物车模块，ng g m shopping-cart --routing=true & ng g c shopping-cart --skip-tests=true。创建完成后，我们需要为这个模块创建一个路由的入口，整个项目路由的入口是app-routing.module.ts。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: "shopping-cart",
    loadChildren: () => import("./shopping-cart/shopping-cart.module").then(m => m.ShoppingCartModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

但是我们发现这个时候访问localhost:4200/shopping-cart并不能正确跳转，因为当路由并不是以component进行引入，而是以loadChildren的形式进行引入时，需要配合<router-outlet></router-outlet>标签进行使用，当路由访问shopping-cart时，router-outlet所在的地方会被ShoppingCartModule中的组件进行填充。我们来对app.component.html进行一些改造。

<div class="root-container">
    <router-outlet></router-outlet>
</div>

同时，将ShoppingCartModule的根路由指向ShoppingCartComponent。

import { ShoppingCartComponent } from './shopping-cart.component';
import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';

export const routes: Routes = [
  {
    path: '',
    component: ShoppingCartComponent
  }
];
@NgModule({
  imports: [RouterModule, RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ShoppingCartRoutingModule {}

这个时候我们访问localhost:4200/shopping-cart时，可以看到：

iShot_2023-02-11_17.55.21.png

我们将SharedModule引入到ShoppingCartModule中，就可以使用Angular Material的组件了。 我们来试着做一个，购物车卡片吧。

  • shopping-cart.component.html
<mat-card class="book">
  <mat-card-header>
    <mat-card-title>
      <div>
        <span>Harry Potter</span>
      </div>
    </mat-card-title>
    <mat-card-subtitle>J.K. ROWLING</mat-card-subtitle>
  </mat-card-header>
  <img src="assets/images/harrypotter.jpg" mat-card-image alt="harry-potter" />
  <mat-card-actions>
    <div class="action-container">
    <span>$42.5</span>
    <span style="flex: 1;"></span>
    <button mat-raised-button color="accent">Cancel</button>
    <button mat-raised-button color="primary">Add</button>
    </div>
  </mat-card-actions>
</mat-card>
  • shopping-cart.component.scss
.book {
  width: 20rem;
}

.action-container {
  display: flex;
  flex-direction: row;
  place-content: start;
  align-items: center;
}

来看看效果吧！

iShot_2023-02-11_18.30.21.png

相关帖子

相关推荐

在线举报