必须依赖 :

  • angualr2+
  • angular/material2 +
  • angular/cdk
  • angular/core
  • angualr/animations

安装依赖 :

脚手架 angular/cli

1
2
3
yarn global add @angular/cli
ng -v
xxxxx

对应关系

Cli 版本 NG版本 命令
最新 最新 yarn add @angular/cli
1.5 5.0.0 yarn add @angular/cli@1.5
1.3.1 4.x.x yarn add @angular/cli@1.3.1
1.1.0 4.0.0 yarn add @angular/cli@1.1.0

使用

1
2
ng new my-first-material-app -si --style=scss
yarn
  • -si 是一个缩写命令 ,它原来的样子是 --skip-install ,意思是跳过自动的依赖安装过程 ,只生成基本的程序代码 .使用这个参数的主要原因是angular默认使用npm来安装依赖 ,速度非常慢

  • --style=scss 是一个长命令 ,意思是使用scss作为主要的样式语言 ,而不是传统的css .使用这个参数的主要原因是开发material是使用scss less sass等会比较舒服 ,当然使用css也是没有问题的 ,并且scss less 中也完美的支持css语法

启动

1
2
3
4
5
6
# ng server --port 3001 
# npm run start --port 3001
yarn start --port 3001

# 一盏茶的时间
webpack: Compiled successfully.
  • —port 非必须,用于启动端口,默认为 4200

效果图

material UI

1
yarn add @angular/material @angular/cdk

开始使用 :

1
2
3
4
5
6
7
// app.module.ts
import {BrowserAnimationsModule} from "@angular/platform-browser/animations"
import {MatToolbarModule} from "@angular/material"

// /style.scss
// 主题位于 /node_modules/@angular/material/prebuilt-themes/
@import "~@angular/material/prebuilt-themes/indigo-pink.css"

大功告成