How to setup Angular Material for AngularJS 1.3.0

Question

I am trying to implement Angular Material into an app that is using Angular 1.3.0 (the lowest version that Angular Material supports).

I have an index.php that contains the following:

<script src="bower_components/jquery/jquery.min.js"></script>
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.min.css">
<script src="bower_components/angular/angular.min.js"></script>
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-messages.min.js"></script>

Within my app.js I have added the new ngMaterial to the modules section below..

var myApp = angular.module('myApp', [ 'myControllers', 'myFilters', 'myServices', 'myDirectives',
    'ui.calendar', 'ngMaterial']);

When I run the app within the browser I get the following error in the console log which when clicked through is the following error on the Angular website -

Module 'ngMaterial' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Can anyone suggest why its not being loaded correctly?

Answer 1

you only added angular-material.min.css file. need to add the angular-material.min.js file also. Add this script to index

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.min.js"></script>