Visit this link for more details
Encountering an error while using angular-material: Uncaught Error: [$injector:unpr] here's the error message$injector/unpr?p0=%24%24forceReflowProvid…eQueue%20%3C-%20%24animate%20%3C-%20%24compile%20%3C-%20%24%24animateQueue
Routing.JS :
(function () {
var app = angular.module('angularMaterial', ['ngRoute','ngMaterial']);
app.config(function ($routeProvider) {
$routeProvider
.when("/main", {
templateUrl: 'main.html',
controller: 'MainController'
})
.otherwise({ redirectTo: "/main" });
});
}());
Index.html : Shell for displaying html pages based on routing
<html lang="en" ng-app="angularMaterial">
<head>
<title>Angular Material Fundamentals</title>
<meta charset="utf-8" />
<link data-require="angular-material@*" data-semver="1.1.0" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css" />
<script data-require="angular-material@*" data-semver="1.1.0" src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4a5aaa3b1a8a5b6eaaeb784f5eaf2eaf4">[email protected]</a>" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<script data-require="angular-animate@*" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-animate.js"></script>
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="14757a73617875663975667d7554253a213a21">[email protected]</a>" data-semver="1.5.5" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f5e51584a535e4d12525a4c4c5e585a4c7f0e110a110a">[email protected]</a>" data-semver="1.5.5" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="routing.js"></script>
<script src="MainController.js"></script>
</head>
<body ng-cloak="">
<header>
<h1>
Angular Material Fundamentals </h1>
</header>
<div ng-view=""></div>
</body>
</html>
Main.html :
<div>
<md-content flex layout-padding>
{{message}}
</md-content>
</div>
MainController.js :
function MainController($scope) {
$scope.message = "Angular Material is a UI component library for Angular JS developers. Angular Material components helps in constructing attractive, consistent, and functional web pages and web apps while adhering to modern web design principles like browser portability, device independence, and graceful degradation. It helps in creating faster, beautiful, and responsive websites. It is inspired from Google Material Design.";
}
MainController.$inject = ['$scope'];
angular.module('angularMaterial').controller('MainController', MainController);
In need of assistance, thank you.