角材料不起作用AngularJS

Question

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

While using angular-material getting following error : Uncaught Error: [$injector:unpr] http://errors.angularjs.org/1.4.2/ $injector/unpr?p0=%24%24forceReflowProvid…eQueue%20%3C-%20%24animate%20%3C-%20%24compile%20%3C-%20%24%24animateQueue 使用角材料时，出现以下错误：未捕获的错误：[$ injector：unpr] http://errors.angularjs.org/1.4.2/ $ injector / unpr？p0 =％24％24forceReflowProvid…eQueue％20％3C- ％20％24animate％20％3 C-％20％24compile％20％3 C-％20％24％24animateQueue

Routing.JS : 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 : Shell for displaying html pages based on routing 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 : Main.html：

<div>

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


</div>

MainController.js : 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);

Please help.....Thanks 请帮助.....谢谢

Answer 1

Angular material have a dependency on angular so you need to add angular.js first and then angular-material.min.js resource file. 角度材质与角度相关，因此您需要先添加angular.js ，然后再添加angular-material.min.js资源文件。

The order of adding script resource should be 添加脚本资源的顺序应为

<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 柱塞： http ://plnkr.co/edit/D8KNdE4phpxwCf6N5s4x?p=preview

角材料不起作用AngularJS

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-01-22 14:42:24

角材料不起作用AngularJS

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-01-22 14:42:24

解决方案1
2 已采纳 2017-01-22 14:42:24