前言

Angular Material(下称Material)的组件样式至少是可以满足一般的个人开发需求(我真是毫无设计天赋),也是Angular官方推荐的组件。我们通过用这个UI库来快速实现自己的idea。

在上节中我们安装了Angular,并新建了一个简单工程。这节中我们将会将Material导入工程中,简单写一个HelloWorld的例子,并讲解Angular模块中的declarations、imports、providers以及bootstrap等概念。

环境安装

Material简单说来就是一个库,于后端来说,无论是Java中的import、C++中的#include还是Python中的import,都是为了导入第三方库。那么在前端,也是需要导入UI库的,导入的UI库包含了代码逻辑(controller)与视图界面(view)。

参考Quick Start安装

简单说来有4步:

Step1加入工程依赖

假设我已经通过ng new的命令创建了一个工程hello-world。进入到该工程中,执行npm install命令。

cd hello-world
npm install --save @angular/material @angular/cdk @angular/animations

使用-save选项将会把后面的三个依赖加入到hello-world/package.json文件中的dependencies属性下。

Step2 导入动画模块

step1中虽然已经加入了第三方依赖并install安装到了node_modules中,但实际上我们还没有执行import操作,将其导入到代码中。

在我们工程的根模块hello-world/src/app/app.module.ts文件中导入浏览器动画模块

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [
    ...,
    BrowserAnimationsModule
  ],
  ...
})
export class AppModule { }

Step3 导入组件模块

在hello-world/src/app目录下新建一个material.module.ts文件。并写下如下代码:

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material';

@NgModule({
    exports: [
        MatButtonModule,
    ]
})
export class MaterialModule {}

这个文件中我们导入了两个包:NgModule以及MatButtonModule,在第四行中的@NgModule用来标注紧跟着的MaterialModule类是一个module类,我们定义这个类,专门用来管理Material相关的模块导入,通过exports关键字,所有import过该MaterialModule的模块的作用范围了组件都可以直接使用exports出来的模块。

MatMaterialModule是Angular Material中的按钮组件,从@angular/material中导入。我们将会在根模块app.module.ts文件中import这个Material模块,这样这个应用都可以使用Angular Material的组件了。

然后在根模块app.module.ts中导入MaterialModule:

import { MaterialModule } from './material.module'

@NgModule({
  ...
  imports: [
    MaterialModule
  ],
  ...
})
export class AppModule { }

Step4 添加主题

在hello-world/src/style.css文件中引入主题的选择:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

官方提供了4种主题,我们可以通过替换最后的xxx.css来进行选择:

  • deeppurple-amber.css
  • indigo-pink.css
  • pink-bluegrey.css
  • purple-green.css

在每一种主题下,Angular Material都给我们搭配的按钮的一些配色。我们可以在官网的右上角切换主题。我们也可以自定义主题,具体参考它的guide,虽然我挺喜欢折腾的,但这个还是......不细说了。

Step5 手势支持

这个主要是指当你把鼠标移到按钮上面的悬浮提示的组件样式。(和css样式中的hover的区别可能在于这个进行了扩展?)

首先还是用npm,安装hammers,并加入到package.json的依赖中去:

npm install --save hammerjs

然后在hello-world/src/main.ts文件中引入

import 'hammerjs';

Step6 Icon依赖

Angular Material也有自己的一套icon库,里面还挺丰富的。我们修改hello-world/src/index.html即可引入。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

index.html文件是Angular工程的页面入口,这个文件的body长这样:

<body>
  <app-root></app-root>
</body>

app-root指的就是在src/app/app.component.ts中定义的'app-root'。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

在angular中,我们想复用一个组件,就可以根据这个组件的selector值,直接引用过来,这个后面具体再说。

上面的操作其实可以用ng add @angular/material一步到位

模块解析

前面比较难理解的可能是为了引入Material自己的MatButtonModule组件时,将其加入到了export中。这里我们说一下Angular中的模块,各位同学可以对照着app.module.ts文件看一下。

Angular中的模块是一个带有 @NgModule() 装饰器的类。@NgModule() 装饰器是一个函数,它接受一个元数据对象,该对象的属性用来描述这个模块。其中最重要的属性如下:

  • declarations: 可声明对象表,把属于该模块的组件,定义在这个属性中。
  • imports: 导入表,本模块的组件依赖的东西,都import进来,这样declare在声明表的组件都可以找到这些依赖
  • exports: 导出表,其他模块要用到本模块的组件,我们将其导出,供其他模块使用
  • providers: 本模块向属于本模块的组件提供一些服务的创建器,因为Angular中有依赖注入,当我们创建了一个服务时,必须在想要注入这个服务的对应模块的providers属性里写上它,以便于创建注入。
  • bootstrap: 应用的主视图,称为根组件。它是应用中所有其它视图的宿主。只有根模块才应该设置这个 bootstrap 属性

所有,在我们现在这个工程中,一共有两个模块:根模块,Material管理模块。

当我们在根模块import了Material管理模块后,该Material模块中export出来的组件都可以让属于根模块的组件使用。

Hello World

整个app目录如下:

app/
├── app-routing.module.ts
├── app.component.css
├── app.component.html
├── app.component.spec.ts
├── app.component.ts
├── app.module.ts
├── hello-world.html
└── material.module.ts

material.module.ts

首先在material.module.ts文件中引入Angular Material的按钮组件和弹出框组件:

  • MatButtonModule
  • MatDialogModule
import { NgModule } from '@angular/core';
import { MatButtonModule,
        MatDialogModule } from '@angular/material';

@NgModule({
    exports: [
        MatButtonModule,
        MatDialogModule
    ]
})
export class MaterialModule {}

app.module.ts

引入MaterialModule。在这个例子中,我们在点击按钮后会出现一个弹出框,这个弹出框也是一个动态组件,动态组件需要在declarations和entryComponents中声明:

import { MaterialModule } from './material.module'
@NgModule({
  declarations: [
    AppComponent,
    HelloWorldDialogComponent
  ],
  entryComponents: [HelloWorldDialogComponent],
  imports: [
    MaterialModule
  ],
  ...
})
export class AppModule { }

app.component.html

我们在html中只用的了一个button,并指定它为Angular Material中的raised-button(关于Angular的button后面会提到)。指定点击事件为openDialog()

<button mat-raised-button (click)="openDialog()">Hello World</button>

app.component.ts && hello-world.html

在ts文件中,我们声明了两个component,其中HelloWorldDialogComponent为动态的弹框组件,接受一个字符串参数。当我们点击页面上的button之后,触发openDialog()方法,传递一个'Hello World!'字符串过去,显示在动态组件的html中。

import { Component, Inject } from '@angular/core';
import { MatDialog, MAT_DIALOG_DATA } from '@angular/material';

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

  constructor(public dialog: MatDialog) {}

  openDialog() {
    this.dialog.open(HelloWorldDialogComponent, {
      data: 'Hello World!'
    });
  }
}

@Component({
  selector: 'hello-world',
  templateUrl: './hello-world.html',
})
export class HelloWorldDialogComponent {
  constructor(@Inject(MAT_DIALOG_DATA) public data: string) {}
}

在动态组件中我们指定了templateUrl是当前目录下的hello-world.html文件。

<h1 mat-dialog-title>Angular</h1>
<div mat-dialog-content>
    {{data}}
</div>

除了以上写法外,我们还可以直接用TAB键上的符号书写html模版,不用再新建一个文件了。

@Component({
  selector: 'hello-world',
  templateUrl: `
    <h1 mat-dialog-title>Angular</h1>
    <div mat-dialog-content>
    {{data}}
    </div>
            `,
})
export class HelloWorldDialogComponent {
  constructor(@Inject(MAT_DIALOG_DATA) public data: string) {}
}

To Be Continue

本节主要写的是如何搭环境,以及Angular的模块的一些理解。后面将详细介绍Angular Material中的组件的使用。有问题的同学欢迎留言交流,想要获取源码的同学可以关注我的公众号: Plus技术栈,回复Angular获取链接。

Angular Material & Hello World的更多相关文章

  1. 手势模型和Angular Material的实现

    iPhone的出现让手势操作大为流行,也使得手势编程成为开发人员的挑战. 拟物设计也把手势编程纳入在内,大概也想制定一个在交互模型标准.现阶段因为MD还在预发布阶段,因此还只实现了单点手势(一个指头) ...

  2. Material使用11 核心模块和共享模块、 如何使用@angular/material

    1 创建项目 1.1 版本说明 1.2 创建模块 1.2.1 核心模块 该模块只加载一次,主要存放一些核心的组件及服务 ng g m core 1.2.1.1 创建一些核心组件 页眉组件:header ...

  3. Angular Material 白天模式和黑夜模式

    Material design调色板 https://www.materialpalette.com/ 明暗:虽然颜色不变,但是针对白天黑夜有做不同处理. 叠加:对话框,弹出菜单,事先是没有加载的.是 ...

  4. Angular Material design设计

    官网: https://material.io/design/ https://meterial.io/components 优秀的Meterial design站点: http://material ...

  5. ASP.NET Core 2.1 Web API + Identity Server 4 + Angular 6 + Angular Material 实战小项目视频

    视频简介 ASP.NET Core Web API + Angular 6的教学视频 我是后端开发人员, 前端的Angular部分讲的比较差一些, 可以直接看代码!!!! 这是一个小项目的实战视频, ...

  6. (Angular Material)用Autocomplete打造带层级分类的DropDown

    效果如下图 代码实现 1.导入模块 import {MatAutocompleteModule} from '@angular/material/autocomplete'; @NgModule({  ...

  7. Angular 2 to Angular 4 with Angular Material UI Components

    Download Source - 955.2 KB Content Part 1: Angular2 Setup in Visual Studio 2017, Basic CRUD applicat ...

  8. [转]VS Code 扩展 Angular 6 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout

    本文转自:https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode VSCode Angular Typ ...

  9. Angular Material 按钮图标系列

    工做中经常用到Angular Material 中的好多按钮素材,奈何官网经常上不去,所以只能自己把这些常用的按钮扒下来了,留给自己同时也留给大家方便查看. Angular material mat- ...

  10. Angular Material Starter App

      介绍 Material Design反映了Google基于Android 5.0 Lollipop操作系统的原生应用UI开发理念,而AngularJS还发起了一个Angular Material ...

随机推荐

  1. Python基础篇 -- 字符串

    字符串 字符串是不可变的对象,任何操作对原字符串是不会有任何影响的. 索引和切片 索引 . 索引就是下标, 下标从 0 开始, 使用[] 来获取数据 s1 = "0123456" ...

  2. pwntools学习

    0x00 数据处理 主要是对整数进行打包,就是转换成二进制的形式,比如转换成地址.p是打包,u是解包 32位:p32,u32 64位:p64,u64 0x01 汇编与反汇编 1.asm 进行汇编,使用 ...

  3. syslog(),closelog()与openlog()--日志操作函数 (2)

    文章出处:http://blog.chinaunix.net/uid-26583794-id-3166083.html 守护进程日志的实现 syslogd守护进程用于解决守护进程的日志记录问题,而日志 ...

  4. common-fileupload上传图片并显示图片

    效果图如下:                                   代码: 注意:需要jar包:commons-fileupload-1.2.1.jar  和 commons-io-1. ...

  5. __new__.py

    def func(self): print('hello %s' %self.name)def __init__(self,name,age): self.name = name self.age = ...

  6. Git学习——创建本地仓库、提交文件

    创建Git仓库 新建或找一个存在的文件夹,在命令行进入该文件夹,输入命令 git init 添加文件到Git仓库 首先使用命令git add <file>,可以多次添加文件: 使用命令gi ...

  7. Vue 2.0 项目在IE下显示空白

    新写的项目在 IE浏览器显示空白 解释一: Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator.Generator.Set.Maps.Proxy ...

  8. linux终端颜色控制

    引言: 由于在c代码中看到过打印彩色字, 又对PS1 想进一步了解,才有了这篇博文.----------------------------------------Linux 终端控制台字体颜色  - ...

  9. 【chm】【windows】win7下chm打开不显示内容

    修改chm属性里面,‘解除锁定’即可.点击chm文件,右键选择属性,点击最下方的解除锁定,保存,退出重新打开即可. ​

  10. python-小数据池,再谈编码,is和 == 的区别

    一 . 小数据池 # 小数据池针对的是: int, str, bool 在py文件中几乎所有的字符串都会缓存. # id() 查看变量的内存地址 s = 'attila' print(id(s)) 二 ...