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

原文地址:https://marxjiao.com/2017/02/25/angular-material-flex/

最近在学习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文档。安装:

npm install -g @angular/cli

2. 新建项目

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

ng new angular-material-flex

3. 安装依赖

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

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

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

修改src/app/app.mudole.ts

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中加上

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

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

  1. 安装 material-design-icons
npm install --save material-design-icons
  1. 修改src/style.css
@import '~@angular/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

"defaults": {
    "styleExt": "scss",
    "component": {}
 }

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

页面示例:http://marxjiao.com/angular-material-flex/
代码地址:https://github.com/MarxJiao/angular-material-flex

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 167,324评论 24 705
  • 昨天翻译了Angualr Material的一个官方入门教程,今天来简单翻译一下它的API文档,保证自己能看懂就行...
    ___wanJS阅读 2,383评论 0 1
  • 大家好我叫七天,来自仙女座大星系,这个世界①地球纪年②30亿年后,我们两个星系将会碰撞合并,所以我星派我先来勘察体...
    万类终始阅读 186评论 6 1
  • 今天下午,老师说数学和英语成绩出来了,我像热锅上的蚂蚁一样高兴。 首先老师说100分的人,数学有四个人,英语有全部...
    潘健乐阅读 133评论 0 2
  • 雨下下停停 像一场仪式 祈祷天晴 亦或是求雨 我们说了不算 问天 天说 雨想下便下 不下便晴 与我何干 我怒了,说...
    夏虫单阅读 432评论 0 1
  • 我居然催吐了,这简直太不可思议了! 看到催吐这个词,你是不是觉得我是在学习那些明星和网红,为了减肥,为了身材,吃完...
    陪伴你forever阅读 401评论 1 2