Angular material 不工作
Angular material not working
我想在 AngularJS 应用程序中使用 angular material,所以我下载了它及其所有依赖项:
<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 上):
当我点击它时,我得到了这个:
我是不是做错了什么?
您似乎没有包含样式表。
尝试添加以下内容:
<link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css" type="text/css">
或者,如果您正在使用 Angular CLI,您可以将此行 @import "~@angular/material/prebuilt-themes/indigo-pink.css";
插入到您的 styles.css.
我想在 AngularJS 应用程序中使用 angular material,所以我下载了它及其所有依赖项:
<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 上):
当我点击它时,我得到了这个:
我是不是做错了什么?
您似乎没有包含样式表。
尝试添加以下内容:
<link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css" type="text/css">
或者,如果您正在使用 Angular CLI,您可以将此行 @import "~@angular/material/prebuilt-themes/indigo-pink.css";
插入到您的 styles.css.