I'm pretty new to angularjs and angular material, and I was wondering why my md-button might not be showing up the way it should on my browser but worked on codepen. I put this in my html file:
<html ng-app='app'>
<head>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<script src='app.js'></script>
</head>
<body ng-controller='MainCont'>
<md-button class='md-primary'>hello</md-button>
</body>
</html>
app.js:
var app = angular.module('app', ['ngMaterial']);
app.controller('MainCont', function(){
});
The module and the controllers are all loading, but in the browser this button shows up like this:
Can someone explain to me why this might be? Thanks so much!
class="md-raised md-primary md-button md-ink-ripple".