Angular Material & Hello World

时间  2019-11-17
标签 angular material hello world 栏目 AngularJS 繁體版
原文   原文链接

文章首发于公众号：Plus技术栈css

前言

Angular Material(下称Material)的组件样式至少是能够知足通常的我的开发需求(我真是毫无设计天赋)，也是Angular官方推荐的组件。咱们经过用这个UI库来快速实现本身的idea。html

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

环境安装

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

参考Quick Start安装typescript

简单说来有4步：shell

Step1加入工程依赖npm

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

cd hello-world
npm install --save @angular/material @angular/cdk @angular/animations
复制代码

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

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加入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中的组件的使用。有问题的同窗欢迎留言交流.

源码见：专题简介

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程