CODEWITHSUNDEEP
javascriptangularjsangularjs-1.6angularjs-material
student1868
student1868

Reputation: 339

Unable to Inject Dependency ngMaterial

I am looking to develop an application that uses both dirPagination and AngularJS material. However, I am unable to inject the ngMaterial dependency into my application. The angularUtils.directives.dirPagination dependency works fine, but as soon as I add ngMaterial, the AngularJS application crashes.

Here is a Plunker with an example (https://plnkr.co/edit/7N7i9TnMc77Nz6xlNhuk?p=preview). In app.js, which is where I instantiate the module, both dependencies are there. If the line reads:

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

Then AngularJS crashes and the page reads {{hello}}. However, since in the controller, I have set $scope.hello to "Hello Plunker!", if the line reads:

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

Then the page displays "Hello Plunker!".

What am I doing wrong?

Thanks for your help!

Upvotes: 1

Views: 3587

Answers (4)

Thomas David Kehoe
Thomas David Kehoe

Reputation: 10960

I'll just add that angular-material.js requires angular-animate.js and angular-aria.js, and the latter two should go before angular-material.js. angular-messages.js doesn't seem to be required.

Upvotes: 0

Rohan Kawade
Rohan Kawade

Reputation: 473

This is a working demo, was having version issue and also order of declaring JS file.

<!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>

Upvotes: 0

KRISHNA PATEL
KRISHNA PATEL

Reputation: 135

  1. You need to include angular.js before any other script that is going to use angular. Here you add script.js before angular.js

  2. You also need to use the same versions of angular modules angular-animate, angular-aria, angular-messages as that of angular.js version Here you used 1.6.4 version of 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>

You can check for the modifications I made to your plnkr https://plnkr.co/edit/En0YaiaiqD1MPPOydAf8?p=preview

Also there were errors for cross domain request for bootstrap.min.css which can be easily fixed by using

https://

cdn

Upvotes: 2

Sajeetharan
Sajeetharan

Reputation: 222720

You are missing the script for material.css, and the order is wrong.

  <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>

WORKING DEMO

Upvotes: 0

Related Questions