12

I wanted to use angular material in an AngularJS application so I downloaded it with all its dependencies:

<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>

And then I included it in my App:

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

After that I wanted to try it on a button:

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

And here is the result ( on Chrome and Firefox): enter image description here

And when I click on it I have this: enter image description here

Did I do something wrong?

4

2 回答 2

18

看起来您不包括样式表。

尝试添加以下内容:

<link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css" type="text/css">
于 2015-03-02T04:47:42.827 回答
5

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

只需确保遵循官方说明https://material.angular.io/guide/getting-started

于 2017-09-24T10:32:15.537 回答