Angular2使用Angular CLI快速搭建工程(一)(3)


npm install --save@angular2-material/core@angular2-material/button@angular2-material/card@angular2-material/radio@angular2-material/checkbox@angular2-material/slider@angular2-material/tooltip

在app.module.ts中加入以下代码,这里当做全局的用

Angular2使用Angular CLI快速搭建工程(一)


接下来我们就能使用一些material的UI组件了,我们在home中使用下试试

然后我们在home.component.html 添加

Angular2使用Angular CLI快速搭建工程(一)


在哪里用都可以,因为是全局的。

理论上这样操作就可以了,但是其实material还依赖一个叫hammerjs的组件我们还没install,直接编译肯定报错,我们安装下,按顺序执行下面2个命令

npm install --save hammerjs npm install --save@types/hammerjs

在app.module.ts中 import 'hammerjs';

Angular2使用Angular CLI快速搭建工程(一)


如此,我们就可以ng serve启动了,可以看到了material的一些组件了

Angular2使用Angular CLI快速搭建工程(一)


使用iconfont

iconfont是阿里巴巴的icon项目,阿里巴巴使用,也公开对外使用,现在一些公司都使用了,它有CDN,访问快,用起来也很方便,这章节讲下如何使用iconfont;(当然,本质上就是引用一个icon的font文件,无论用bootstrap的还是自己做的,都是一样的,希望读者触类旁通)

由于篇幅过长,请到我的另一篇文章《Angular2-使用Angular-CLI快速搭建工程(二) 》继续查看

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wysgyw.html