$ injector：modulerr angularjs 1中的模塊錯誤

Question

將ngMaterial添加到模塊會導致錯誤。 我看不到有什么問題。

**成功**

var routerObj = angular.module('note', ['ngRoute','ngAnimate']);

**錯誤（鏈接）**

var routerObj = angular.module('note', ['ngRoute','ngAnimate','ngMaterial']);

為什么以上代碼中的差異會導致錯誤？

<!DOCTYPE html>
    <html ng-app="note" ng-controller="homeCtrl" ng-class="animation">
      <head>
        <meta charset="utf-8">    
        <base href="/">
        <title></title>



        <!-- Angularjs -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
        <!-- AngularRoute -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
        <!-- AngularAnimation -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script>
        <!-- Angular Material Library -->
        <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <!-- Jquery -->
        <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc=" crossorigin="anonymous"></script>
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <!-- font awesome -->
        <link rel="stylesheet" href="/design/font-awesome.min.css">

        <!-- layout -->
        <link rel="stylesheet" href="/design/layout.css">

        <!-- route animation -->
        <link rel="stylesheet" href="/design/route-animation.css">
        <!-- Angular Material style sheet -->
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">



            <script>
            (function(){

                //module init
                var routerObj = angular.module('note', ['ngRoute','ngAnimate','ngMaterial']);

                //route
                routerObj.config(function ($routeProvider, $locationProvider) {
                    $routeProvider
                        .when('/home', {templateUrl: '/template/home.html', animation: 'fade-in'})
                        .when('/popular', {templateUrl: '/template/list-popular.html', animation: 'slide-left'})
                        .otherwise({redirectTo: '/home', animation: 'fade-in'});

                    //url hash code eliminate
                    $locationProvider.html5Mode(true);

                });

              //controll layout(GNB Ctrl, Animation Ctrl)
                routerObj.controller('homeCtrl', function($scope, $rootScope, $location){
                    // route animation
                  $rootScope.$on('$routeChangeStart', function(event, currRoute, prevRoute){
                    $rootScope.animation = currRoute.animation;
                  });
                    // current url(GNB show/hide controll)
                    switch($location.path()){
                        case "/home":
                            $rootScope.basicLayout = true;
                        break;
                        default:
                            $rootScope.basicLayout = false;
                        break;
                    }

                }); //end homeCtrl

            }());    
            </script>
      </head>
      <body>

        <p>ngRoute, ngMaterial</p>

      </body>
    </html>

Answer 1

ngMaterial模塊無法加載。 檢查它是否已正確安裝和配置。 檢查控制台中的錯誤。

Answer 2

角材料有一些依賴性

嘗試添加：

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script>

和：

var routerObj = angular.module('note', ['ngRoute','ngAnimate','ngMaterial', 'ngAria']);

Answer 3

包括必要的腳本angular-aria.min和angular-messages.min，它應按以下順序排列。

<!-- Angularjs -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
        <!-- AngularRoute -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
        <!-- AngularAnimation -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script>

      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>

$ injector：modulerr angularjs 1中的模塊錯誤

問題描述

3 個解決方案

解決方案1
0 2016-12-29 14:55:55

解決方案2
0 已采納 2016-12-29 14:57:12

解決方案3
0 2016-12-29 14:58:33

$ injector：modulerr angularjs 1中的模塊錯誤

問題描述

3 個解決方案

解決方案1 0 2016-12-29 14:55:55

解決方案2 0 已采納 2016-12-29 14:57:12

解決方案3 0 2016-12-29 14:58:33

解決方案1
0 2016-12-29 14:55:55

解決方案2
0 已采納 2016-12-29 14:57:12

解決方案3
0 2016-12-29 14:58:33