Невозможно ввести зависимость ngMaterial

Я ищу разработку приложения, которое использует материалы dirPagination и AngularJS. Тем не менее, я не могу ввести ngMaterial зависимость в моем приложении. angularUtils.directives.dirPagination зависимость работает нормально, но как только я добавлю ngMaterial, приложение AngularJS падает.

Вот Plunker с примером ( https://plnkr.co/edit/7N7i9TnMc77Nz6xlNhuk?p=preview). В app.js, где я создаю экземпляр модуля, есть обе зависимости. Если строка гласит:

angular.module('myApp', ['angularUtils.directives.dirPagination', 'ngMaterial']);

Затем происходит сбой AngularJS, и на странице отображается {{hello}}. Тем не менее, так как в контроллере, я установил $scope.hello в "Hello Plunker!", если строка гласит:

angular.module('myApp', ['angularUtils.directives.dirPagination']);

Затем на странице появится сообщение "Привет, Плункер!".

Что я делаю неправильно?

Спасибо за вашу помощь!

Источник

3 ответа

Решение

  1. Вам нужно включить angular.js перед любым другим скриптом, который будет использовать angular. Здесь вы добавляете script.js перед angular.js

  2. Вам также необходимо использовать те же версии угловых модулей angular-animate, angular-aria, angular-messages, что и версии angular.js. Здесь вы использовали версию angular.js версии 1.6.4.

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-messages.min.js"></script>

Вы можете проверить изменения, которые я внес в ваш plnkr https://plnkr.co/edit/En0YaiaiqD1MPPOydAf8?p=preview

Также были ошибки при междоменном запросе для bootstrap.min.css, которые можно легко исправить с помощью

https: //

CDN

Источник

Вам не хватает сценария для material.css, и порядок неправильный.

  <script data-require="angular.js@1.3.0" data-semver="1.3.0" src="https://code.angularjs.org/1.3.0/angular.js"></script>
  <link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
  <script src="script.js"></script>
  <script src="dirPagination.js"></script>

РАБОЧАЯ ДЕМО

Источник

Я просто добавлю это angular-material.js требует angular-animate.js а также angular-aria.js, а последние два должны идти перед angular-material.js. angular-messages.js кажется, не требуется.

Источник

Это рабочая демоверсия, была проблема с версией, а также порядок объявления JS файл.

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
       <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@3.1.1" data-semver="3.1.1" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    
  </head>

  <body>
    <div data-ng-app="myApp">
      <div data-ng-controller="myCtrl">
        <h1>{{hello}}</h1>
        <md-toolbar class="md-warn">
         <div class="md-toolbar-tools">
            <h2 class="md-flex">HTML 5</h2>
         </div>
      </md-toolbar>
      </div>
    </div>
  <script>
   var app = angular.module('myApp', ['ngMaterial']);
   app.controller('myCtrl', function($scope, $http) {
   $scope.hello = "Hello Plunker!";
   });


   </script>
  </body>

</html>

Источник
Другие вопросы по тегам