使用angular + material 2 + flex-layout 开发项目

最近在学习angular(这里指的是2.0以上的版本,官方说法angular 1.x叫做angularjs, 2.0以上的版本叫angular),试用了下material 2感觉官方文档中有些细节缺失。本文的旨在于记录搭建环境的过程和介绍一些官方未提到的细节。

TL;DR: 使用angular-cli搭建开发环境,并配置scss处理样式。material官方教程中的图标字体使用的是google的字体服务器,国内访问不是很稳定,这里使用npm本地安装material-design-icons字体来解决该问题。使用flex-layout来做响应式布局,这个布局库要比material中的grid强大的多。

下面我们开始进行。

1. 工具安装

这里我们选择angular-cli作为构建工具,angular-cli提供了环境搭建、代码生成、打包等一些列功能。angular-cli文档。安装:

1
npm install -g @angular/cli

2. 新建项目

使用ng new命令新建项目,这里我新建一个叫angular-material-flex的项目

1
ng new angular-material-flex

3. 安装依赖

我们使用material 2作为样式库,flex-layout作为布局工具,所以需要安装这两个库和它们的依赖。material 2依赖hammerjs所以我们安装@angular/material、hammerjs和@angular/flex-layout

1
npm install --save @angular/material hammerjs @angular/flex-layout

4. 将material和flex-layout添加到项目中

修改src/app/app.mudole.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

// 引入material和hammer
import { MaterialModule } from '@angular/material';
import 'hammerjs';

// 引入flex-layout
import { FlexLayoutModule } from "@angular/flex-layout";

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

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
MaterialModule.forRoot(), // 为子组件引入Material
FlexLayoutModule, // 为子组件引入FlexLayout
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

至此flex-layout已经可以使用了,但material的icon字体还不能用。官方介绍上是需要在src/index.html中加上

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

显然国内的网络环境,使用google的字体服务器还是不那么稳定的。于是乎找到了字体源是material-design-icons。下面是使用方法:

  1. 安装 material-design-icons
1
npm install --save material-design-icons
  1. 修改src/style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@import '[email protected]/material/core/theming/prebuilt/deeppurple-amber.css';

/* fallback */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2');
}

.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}

其它

我习惯使用scss预处理css,所以修改.angular-cli.json,预处理为scss

1
2
3
4
"defaults": {
"styleExt": "scss",
"component": {}
}

至此整个环境搭建就完成了,可以按照angular-cli文档material文档flex-layout文档进行开发了。