角度材质不会应用样式

时间:2015-01-20 20:20:21

标签: angularjs angular-material

当我尝试使用Angular Material设计时遇到了问题。 它没有任何风格。

这是我的HTML:

<!DOCTYPE html>
<html ng-app>
<head lang="en">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>Test</title>

    <link rel="stylesheet" href="./libs/css/angular-material.css"/>

    <script src="./libs/js/angular.js"></script>
    <script src="./libs/js/angular-aria.js"></script>
    <script src="./libs/js/angular-animate.js"></script>
    <script src="./libs/js/hammer.js"></script>
    <script src="./libs/js/angular-route.js"></script>
    <script src="./libs/js/angular-resource.js"></script>
    <script src="./libs/js/angular-material.js"></script>
</head>

<body>
    <md-button>asd</md-button>
</body>
</html>

我有什么遗失的吗? angular-material.js是凉亭安装的文件 angular-material.css也是

2 个答案:

答案 0 :(得分:2)

<html ng-app="app">
<head lang="en">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>Test</title>

    <link rel="stylesheet" href="./libs/css/angular-material.css"/>
<link rel="stylesheet" href="./libs/themes/purple-theme.css">
            <link rel="stylesheet" href="./libs/themes/blue-grey-theme.css">
    <script src="./libs/js/angular.js"></script>
    <script src="./libs/js/angular-aria.js"></script>
    <script src="./libs/js/angular-animate.js"></script>
    <script src="./libs/js/hammer.js"></script>
    <script src="./libs/js/angular-route.js"></script>
    <script src="./libs/js/angular-resource.js"></script>
    <script src="./libs/js/angular-material.js"></script>
 <script>
 var app = angular.module('app', 
  [

      "ngAnimate",
      "ngSanitize", 
      "ngMaterial"
  ]);
 </script>




</head>




<body>
    <md-button>asd</md-button>
</body>
</html>

如果这不起作用,您可能有错误的路径或者可能是较新的版本。要检查它,请查看angular-material文件夹。你有一个&#34;主题&#34;夹?新版本没有。删除较新的版本并采用早期版本。

如果您可以使用shell处理一下,可以试试这些:

bower install
bower uninstall angular-material
bower install angular-material
祝你好运!

答案 1 :(得分:-2)

<html ng-app="app"> ...我不确定ng-app是否有效?

并向我们显示控制台错误日志(在浏览器中按F12键)。