角度錯誤：$ injector：modulerr模塊錯誤

Question

我想運行一個角度材質的例子，但對於我的生活我無法弄清楚爲什麼我得到這個錯誤。

我得到的錯誤是Error: $injector:modulerr Module Error

這是錯誤報告我：link

任何想法的問題可能是什麼？我實際上從他們的示例網站複製粘貼這個。

下面是代碼：

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

你引用與您的角度應用的.js文件？ 我只能看到外部的JavaScript依賴關係，但沒有任何與您的應用程序控制器相關。注意您導入的訂單

Answer 2

更改模塊腳本以刪除對material.svgAssetsCache的引用，演示將運行但沒有最後一行按鈕 - 引用「本地」圖像資源。

如果你抓住的圖標複印件（涼亭安裝材料設計圖標）並找到相關的24px的.SVG文件，並在/從你的網站的根目錄（比如說）/ IMG /圖標彈出他們（根據需要調整文件名和路徑），那麼即使這一節也能正常工作。

當您考慮這個演示時，這個演示很不值得推薦，因爲它很可能被選爲第一次嘗試，但它只能在CodePen沙盤中使用。

Answer 3

您需要添加：

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

Answer 4

最可能的是你缺少SVG圖標

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