Я хотел использовать материал angular в приложении AngularJS, поэтому я загрузил его со всеми его зависимостями:

<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): введите описание изображения здесь

И когда я нажимаю на нее, я получаю следующее: введите описание изображения здесь

Я сделал что-то не так?

12
Yass Ikrou 2 Мар 2015 в 00:49

2 ответа

Лучший ответ

Похоже, вы не включаете таблицу стилей.

Попробуйте добавить следующее:

<link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css" type="text/css">
18
Ryan 2 Мар 2015 в 04:47

В качестве альтернативы, если вы используете Angular CLI, вы можете вставить эту строку @import "~@angular/material/prebuilt-themes/indigo-pink.css"; в свой файл styles.css.

Просто обязательно следуйте официальным инструкциям https://material.angular.io/guide/getting- началось

4
Fzum 24 Сен 2017 в 10:32