角度材料无法正常工作

Question

I am learning AngularJS and I want to use Angular Material, I've downloaded it with npm install angular-material and I've imported it but it is not working.我正在学习 AngularJS，我想使用 Angular Material，我已经用npm install angular-material下载了它，我已经导入了它，但它不起作用。 That is what I see, any help please?这是我看到的，有什么帮助吗？

This is my html code这是我的 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>

This is my app.js file这是我的app.js文件

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

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

Answer 1

I think you are missing CSS files here.我认为您在这里缺少 CSS 文件。 The directive works fine but the styling is not there.该指令工作正常，但样式不存在。 Have a look at their Github , under the CDN part, it is written what to import.看看他们的 Github ，在 CDN 部分下，写的是要导入的内容。

The CSS should be in your node_modules folder so I guess you should put this in your head : CSS 应该在你的node_modules文件夹中，所以我想你应该把它放在你的head ：

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

Answer 2

This might be what you was looking for, you need to add few lines to styles in angular.json这可能就是您要找的，您需要在 angular.json 中的样式中添加几行

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

This worked for me.这对我有用。 Give a Try!试一下！

角度材料无法正常工作

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-02-14 13:32:36

解决方案2
0 2020-12-07 10:00:20

角度材料无法正常工作

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-02-14 13:32:36

解决方案2 0 2020-12-07 10:00:20

解决方案1
1 已采纳 2016-02-14 13:32:36

解决方案2
0 2020-12-07 10:00:20