$ инжектор: modulerr Ошибка модуля в angularjs 1

Добавление ngMaterial в модуль приводит к ошибке. Я не вижу, что случилось.

** успех **

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

** Ошибка (link) **

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>

источник

2016-12-29 user7354286

Угловая материал имеет некоторые зависимости

Попробуйте добавить:

<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']);

источник

2016-12-29 14:57:12

Проблема решена. Спасибо за ваш совет. : D – user7354286

ngMaterial модуль не в состоянии загружать. Убедитесь, что он правильно установлен и настроен. Проверьте наличие ошибок в консоли.

источник

2016-12-29 14:55:55

Включите необходимые сценарии угловой aria.min & угловые-сообщения .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>

источник

2016-12-29 14:58:33

Добавлен модуль сообщений. Спасибо за ваш ответ. – user7354286

$ инжектор: modulerr Ошибка модуля в angularjs 1

ответ

Смежные вопросы