2017-01-22 97 views
1

http://plnkr.co/edit/Lvdl4XpReQr6AzsuOQhP?p=preview角的材料不工作AngularJS

當使用角材料得到以下錯誤:未捕獲的錯誤:[$注射器:unpr] http://errors.angularjs.org/1.4.2/ $注射器/ unpr P0 =%24%24forceReflowProvid ... eQueue%20%3C - %20%24animate%20%3 C-%20%24compile%20%3 C-%20%24%24animateQueue

Routing.JS:

(function() { 
    var app = angular.module('angularMaterial', ['ngRoute','ngMaterial']); 
    app.config(function ($routeProvider) { 
     $routeProvider 
      .when("/main", { 
       templateUrl: 'main.html', 
       controller: 'MainController' 
      }) 
      .otherwise({ redirectTo: "/main" }); 

    }); 
}()); 

的Index.html:殼牌顯示HTML頁面基礎在路由

<html lang="en" ng-app="angularMaterial"> 

    <head> 
    <title>Angular Material Fundamentals</title> 
    <meta charset="utf-8" /> 
    <link data-require="[email protected]*" data-semver="1.1.0" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css" /> 
    <script data-require="[email protected]*" data-semver="1.1.0" src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script> 
    <script data-require="[email protected]" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script> 
    <script data-require="[email protected]*" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-animate.js"></script> 
    <script data-require="[email protected]" data-semver="1.5.5" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> 
    <script data-require="[email protected]" data-semver="1.5.5" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script> 
    <script src="routing.js"></script> 
    <script src="MainController.js"></script> 
    </head> 

    <body ng-cloak=""> 
    <header> 
     <h1> 
     Angular Material Fundamentals </h1> 
    </header> 
    <div ng-view=""></div> 
    </body> 

</html> 

main.html中:

<div> 

    <md-content flex layout-padding> 
     {{message}} 
    </md-content> 


</div> 

MainController.js:

function MainController($scope) { 
    $scope.message = "Angular Material is a UI component library for Angular JS developers. Angular Material components helps in constructing attractive, consistent, and functional web pages and web apps while adhering to modern web design principles like browser portability, device independence, and graceful degradation. It helps in creating faster, beautiful, and responsive websites. It is inspired from Google Material Design."; 

} 


MainController.$inject = ['$scope']; 
angular.module('angularMaterial').controller('MainController', MainController); 

請幫助.....感謝

回答

1

角材料有角的依賴,所以你需要添加angular.js第一和然後角material.min.js resourc e文件。

添加腳本資源的順序應該是

<script data-require="[email protected]" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script> 
<script data-require="[email protected]*" data-semver="1.1.0" src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script> 

Plunker:http://plnkr.co/edit/D8KNdE4phpxwCf6N5s4x?p=preview