使用Angular-cli搭建Angular Material 2应用示例
2017-03-05 17:09
531 查看
百度百科:Material Design,中文名:材料设计语言,是由Google推出的全新的设计语言,谷歌表示,这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。
1.首先需要全局安装angular-cli:
2.然后初始化一个angular2项目:
3.安装angular material依赖:
4.安装hammer.js依赖(某些组件需要用到,不是必须):
5.引入Material Icons和CSS样式:
在style.css中写入如下代码:
6.在app.module.ts中引入MaterialModule
7.测试是否成功:
app.component.html中写入Material组件代码:
8.运行代码:
9.浏览器中打开
效果:
参考链接:http://www.mithunvp.com/angular-material-2-angular-cli-webpack/
1.首先需要全局安装angular-cli:
npm install -g @angular/cli
2.然后初始化一个angular2项目:
ng new my-project
3.安装angular material依赖:
npm install --save @angular/material
4.安装hammer.js依赖(某些组件需要用到,不是必须):
npm install --save hammerjs
5.引入Material Icons和CSS样式:
在style.css中写入如下代码:
/*如果需要md-icon需要引入*/ @import '~https://fonts.googleapis.com/icon?family=Material+Icons'; /*必须引入全局CSS样式*/ @import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
6.在app.module.ts中引入MaterialModule
import { MaterialModule } from '@angular/material'; ... imports:[ MaterialModule.forRoot() ]
7.测试是否成功:
app.component.html中写入Material组件代码:
<md-tab-group> <md-tab label="One"> <h1>Some tab content</h1> <p>...</p> </md-tab> <md-tab label="Two"> <h1>Some more tab content</h1> <p>...</p> </md-tab> </md-tab-group> <md-radio-group> <md-radio-button value="1">Option 1</md-radio-button> <md-radio-button value="2">Option 2</md-radio-button> </md-radio-group> <md-icon>delete_forever</md-icon>
8.运行代码:
ng serve
9.浏览器中打开
localhost:4200
效果:
参考链接:http://www.mithunvp.com/angular-material-2-angular-cli-webpack/
相关文章推荐
- Angular2-使用Angular-CLI快速搭建工程(二)
- 使用angular-cli-ghpages部署Angular应用到GitHub
- 使用vue-cli快速搭建大型单页应用
- Angular2使用Angular-CLI快速搭建工程(二)
- 详解使用angular-cli发布i18n多国语言Angular应用
- 使用 vue-cli 开发多页面应用的最简示例
- Angular-Cli+nginx使用gzip static再次加快应用访问速度!!!
- Angular-Cli+nginx使用gzip static再次加快应用访问速度!!!
- 使用Vue-cli搭建多页面应用时对项目结构和配置的调整
- 在Windows系统中使用C++进行Android应用开发的环境搭建
- 国产InitPHP框架系列 - InitPHP框架搭建高可用WEB应用04:服务层Service使用
- Esri Maps for Office使用方法与示例应用
- Mysql子查询IN中使用LIMIT应用示例
- Mysql子查询IN中使用LIMIT应用示例
- 使用Apache Shiro和Spring搭建安全应用
- 使用高通公司的Vuforia SDK搭建Android版移动AR应用开发环境
- ubuntu下使用golang、qml与ubuntu sdk开发桌面应用 (简单示例)
- 使用Log4j为项目配置日志输出应用详细总结及示例演示.
- win7上搭建android开发环境使用appium自动化测试android应用(一)
- phonegap 开发入门 PhoneGap官方网站上有详细的入门示例教程,这里,我针对使用PhoneGap进行Android移动应用的开发对其官网的Get Started进行一些介绍、补充。 Ste