user6934713 user6934713 - 1 month ago 14
AngularJS Question

Including angular material errors out

I have a quiz created with bootstrap that I am trying to convert to angular material. When I add the angular material everything errors out. Most likely I don't include it the right way. This is not the whole code just a short example.
Thank you in advance for the help.

app.js

(function(){
angular
.module("myApp", ['ngMaterial']);

})();


test.js

(function(){
angular.module("myApp")
.factory("quizMetrics", QuizMetrics);
QuizMetrics.$inject = ['DataService'];
})();


And the HTML

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.3/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.3/angular-material.min.js"></script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/test.js"></script>
</body>
</html>

Answer

I believe that you have to include the angular material js after the angular.min.js and as it uses some functions from there, also some additional libraries may be needed, according to their example you should have the following libraries defined:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>

See full example here

Comments