Question

http://plnkr.co/edit/Lvdl4XpReQr6AzsuOQhP?p=preview

使用角度材料时出现以下错误：未捕获错误：[$ injector：unpr] http://errors.angularjs.org/1.4.2/ $ injector / unpr？p0 =％24％24forceReflowProvid ... eQueue％20％3C-％20％24animate％20 ％3C-％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页面的Shell

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

  <head>
    <title>Angular Material Fundamentals</title>
    <meta charset="utf-8" />
    <link data-require="angular-material@*" 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="angular-material@*" 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="angular.js@1.6.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
    <script data-require="angular-animate@*" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-animate.js"></script>
    <script data-require="angular-aria@1.5.5" data-semver="1.5.5" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
    <script data-require="angular-messages@1.5.5" 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);

请帮忙.....谢谢

Answer 1

角度材质依赖于角度，因此您需要先添加 angular.js ，然后再添加 angular-material.min.js 资源文件。

添加脚本资源的顺序应为

<script data-require="angular.js@1.6.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<script data-require="angular-material@*" 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

角度材料不起作用AngularJS

1 个答案: