角度材料不起作用

时间:2015-03-01 21:49:39

标签: angular-material

我想在AngularJS应用程序中使用角度材质,所以我下载了它的所有依赖项:

<script src="bower_components/hammer/hammer.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-material/angular-material.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>

然后我把它包含在我的应用程序中:

var myApp = angular.module('myApp', ['ngRoute', 'ngResource', 'ngSanitize', 'ngMaterial', 'ngAnimate', 'ngAria']);

之后我想在按钮上尝试:

<md-container> <md-button>boutton1</md-button> </md-container>

这是结果(在Chrome和Firefox上): enter image description here

当我点击它时,我有这个: enter image description here

我做错了吗?

2 个答案:

答案 0 :(得分:18)

看起来你没有包括样式表。

尝试添加以下内容:

<link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css" type="text/css">

答案 1 :(得分:3)

或者,如果您使用的是Angular CLI,则可以将此行@import "~@angular/material/prebuilt-themes/indigo-pink.css";插入styles.css。

请务必遵循官方说明https://material.angular.io/guide/getting-started