Angular Material 工作不正常

Question

我正在学习 AngularJS 并且我想使用 Angular Material，我已经用 npm install angular-material 下载了它并导入了它，但是它不起作用。这就是我看到的，有什么帮助吗？

这是我的html代码

<html>
<head>
    <title>My store</title>
</head>
<body ng-app="tienda" ng-controller="tiendaCtrl">
    {{name}}

    <md-toolbar>
        <div class="md-toolbar-tools">
            <p><strong>My Store</strong></p>
            <md-button><md-icon class='mdi mdi-plus-circle'></md-icon>New Classified</md-button>
        </div>
    </md-toolbar>

    <script src="bower_components/angular/angular.js"></script>
    <script src="node_modules/angular-material/angular-material.js"></script>
    <script src="node_modules/angular-animate/angular-animate.js"></script>
    <script src="node_modules/angular-aria/angular-aria.js"></script>
    <script src="js/app.js"></script>
    <script src="js/tienda.ctrl.js"></script>

</body>

这是我的 app.js 文件

var myApp = angular.module("tienda", ['ngMaterial']);

myApp.config(function($mdThemingProvider){
    $mdThemingProvider.theme('default')
        .primaryPalette('teal')
        .accentPalette('orange');
});

Answer 1

我认为您在这里缺少 CSS 个文件。该指令工作正常，但样式不存在。看看their Github，在CDN部分下面，写着导入什么。

CSS 应该在您的 node_modules 文件夹中，所以我想您应该将其放入 head:

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

Answer 2

这可能是您要查找的内容，您需要在 angular.json

中的样式中添加几行

"./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css"

这对我有用。试一试！

Angular Material 工作不正常

Angular Material not working correctly

javascript

angularjs

angular-material