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

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

Вот плункер с примером (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']);

Затем на странице отображается «Hello Plunker!».

Что я делаю не так?

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


javascript angularjs angularjs-material angularjs-1.6
person student1868    schedule 07.07.2017    source источник

Ответы (4)


arrow_upward
2
arrow_downward

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

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

        <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

person KRISHNA PATEL    schedule 07.07.2017

arrow_upward
0
arrow_downward

У вас отсутствует скрипт для material.css и неправильный порядок.

  <script data-require="[email protected]" 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>

РАБОЧАЯ ДЕМО

person Sajeetharan    schedule 07.07.2017

arrow_upward
0
arrow_downward

Это рабочая демонстрация, у нее была проблема с версией, а также с порядком объявления файла 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="[email protected]" 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>

person Rohan Kawade    schedule 07.07.2017

arrow_upward
0
arrow_downward

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

person Thomas David Kehoe    schedule 15.04.2020