Angular Material 升级评审文档

未分类

升级Angular Material库的必要性：

v1.1.1修复了v0.8.3的一些bug（ipad上单击变多击，之前是修改源码打补丁），也可以自己build自己的版本
项目库的版本：v0.8.3
最新库的版本：v1.1.1

https://github.com/angular/bower-material
这个仓库是deployment repository（可直接部署的仓库），不需要再自行build

https://github.com/angular/material/tree/v1.1.1
这个仓库是真正的源码仓库，可以自行build自己的版本

仓库在自己的gulpfile中已经定义了一些 build模式

# Build and deploy the library to
#
# - `dist/angular-material.js`
# - `dist/angular-material.css`
# - `dist/themes`
gulp build

gulp build得到的是完整的lib库，包括core以及各个Components

gulp build-all-modules
// 生成的是下面的目录结构
-- dist
    -- modules
       -- js
          -- core
          -- <component folder>

gulp build-all-modules 得到的是分离的core模块以及各个Components

自定义build：遗憾的是官方并未提供将指定的一些模块打包在一个文件中，而这才是我们想要的自定义build，在学习了相关的gulp知识之后，参考官方的gulp任务文件，写出了自定义Build的方法

具体自定义build的方法，详见代码

项目中使用的模块

newbiModules: [
      'backdrop',   // 弹窗的遮罩层
      'button',     // 按钮
      'checkbox',   // 复选框
      'content',    // 内容容器
      'dialog',     // 弹框 
      'icon',       // Tab依赖
      'progressCircular',   // loading
      'radioButton',    // 单选
      'switch',         // 开关切换
      'tabs',           // 选项卡
      'toast'           // 提示框
  ]

升级后的一些差异

主题：不再默认添加md-default-theme这个class了

md-button   // 升级后的差异：拥有href或者ng-href属性的时候，将变成a元素，而不是button元素

Tabs
// 生成的结构变化很大
![tabs_prev.png-73.6kB][1]