Unable to Inject Dependency ngMaterial

Question

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!

Answer 1

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