angular Error: $ injector: modulerr Modul Error

Question

Ich versuche, eines der Angular Materials Beispiele auszuführen, aber für das Leben von mir kann ich nicht herausfinden, warum ich diesen Fehler bekomme.

Der Fehler Ich erhalte ist Error: $injector:modulerr Module Error

Dies ist der Fehlerbericht Ich habe: link

Irgendwelche Ideen, was das Problem sein könnte? Ich kopierte das praktisch von ihrer Beispielwebsite. Hier

ist der Code:

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache']) 
 

 
.controller('AppCtrl', function($scope) { 
 

 
});

.buttondemoBasicUsage section { 
 
    background: #f7f7f7; 
 
    border-radius: 3px; 
 
    text-align: center; 
 
    margin: 1em; 
 
    position: relative !important; 
 
    padding-bottom: 10px; } 
 

 
.buttondemoBasicUsage md-content { 
 
    margin-right: 7px; } 
 

 
.buttondemoBasicUsage section .md-button { 
 
    margin-top: 16px; 
 
    margin-bottom: 16px; } 
 

 
.buttondemoBasicUsage .label { 
 
    position: absolute; 
 
    bottom: 5px; 
 
    left: 7px; 
 
    font-size: 14px; 
 
    opacity: 0.54; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script> 
 

 
<div ng-controller="AppCtrl" ng-cloak="" class="buttondemoBasicUsage" ng-app="MyApp"> 
 
    <md-content> 
 

 
    <section layout="row" layout-sm="column" layout-align="center center" layout-wrap=""> 
 
     <md-button class="md-icon-button md-primary" aria-label="Settings"> 
 
     <md-icon md-font-icon="icon-home"></md-icon> 
 
     </md-button> 
 
     <md-button class="md-icon-button md-accent" aria-label="Favorite"> 
 
     <md-icon md-font-icon="icon-home"></md-icon> 
 
     </md-button> 
 
     <md-button class="md-icon-button" aria-label="More"> 
 
     <md-icon md-font-icon="icon-home"></md-icon> 
 
     </md-button> 
 
     <md-button href="http://google.com" title="Launch Google.com in new window" target="_blank" ng-disabled="true" aria-label="Google.com" class="md-icon-button launch"> 
 
     <md-icon md-font-icon="icon-home"></md-icon> 
 
     </md-button> 
 
     <div class="label">Icon Button</div> 
 
    </section> 
 
    </md-content> 
 
</div> 
 

 
<!-- 
 
Copyright 2016 Google Inc. All Rights Reserved. 
 
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license. 
 
-->

Answer 1

Haben Verweis Sie die JS-Datei auf Ihre Winkel App zu tun? Ich kann nur die externen JavaScript-Abhängigkeiten sehen, aber nichts mit Ihrer App - Controller. Achten Sie auf die Reihenfolge, in der Sie sie importieren

Answer 2

Ändern Sie das Modulskript, um den Verweis auf material.svgAssetsCache zu entfernen, und die Demo wird ausgeführt, aber ohne die letzte Zeile der Schaltflächen - die auf "lokale" Bildressourcen verweisen.

Wenn Sie eine Kopie der Symbole greifen (Bower Material-Design-Ikonen installieren) und die entsprechenden 24px .svg Dateien suchen und Pop sie in (sagen wir)/img/icons/von der Wurzel Ihrer Website (Anpassung der Dateinamen und Pfad wie erforderlich) dann funktioniert auch dieser Abschnitt gut.

Die Demo ist ziemlich abschreckend, wenn man darüber nachdenkt, da sie wahrscheinlich als erster Stich beim Ausprobieren ausgewählt wird, aber nur innerhalb des CodePen Sand-Trays funktioniert.

Answer 3

Sie müssen hinzufügen:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> 

Answer 4

Wahrscheinlich Sie vermissen svg Symbole

<script src="http://ngmaterial.assets.s3.amazonaws.com/svg-assets-cache.js"></script>