Angular Material & Hello World
前言Angular Material(下称Material)的组件样式至少是可以满足一般的个人开发需求( 在上节中我们安装了Angular,并新建了一个简单工程。这节中我们将会将Material导入工程中,简单写一个HelloWorld的例子,并讲解Angular模块中的declarations、imports、providers以及bootstrap等概念。 环境安装Material简单说来就是一个库,于后端来说,无论是Java中的
简单说来有4步: Step1加入工程依赖 假设我已经通过 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 {} 这个文件中我们导入了两个包:
然后在根模块app.module.ts中导入MaterialModule: import { MaterialModule } from './material.module' @NgModule({ ... imports: [ MaterialModule ],... }) export class AppModule { } Step4 添加主题 在hello-world/src/style.css文件中引入主题的选择: @import "[email?protected]/material/prebuilt-themes/indigo-pink.css"; 官方提供了4种主题,我们可以通过替换最后的xxx.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值,直接引用过来,这个后面具体再说。
模块解析前面比较难理解的可能是为了引入Material自己的MatButtonModule组件时,将其加入到了export中。这里我们说一下Angular中的模块,各位同学可以对照着app.module.ts文件看一下。 Angular中的模块是一个带有
所有,在我们现在这个工程中,一共有两个模块:根模块,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的按钮组件和弹出框组件:
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后面会提到)。指定点击事件为 <button mat-raised-button (click)="openDialog()">Hello World</button> app.component.ts && hello-world.html在ts文件中,我们声明了两个component,其中 import { Component,Inject } from '@angular/core'; import { MatDialog,MAT_DIALOG_DATA } from '@angular/material'; @Component({ selector: 'app-root',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获取链接。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |