Angular Material design 'Getting started'

Ashwin Kumar

unread,

Aug 13, 2016, 1:04:08 AM8/13/16

to AngularJS

I am trying to implement Angular material design app mentioned in the link https://material.angularjs.org/latest/getting-started

But the output is not as expected. Below is my simple app code and have attached the output

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
    <meta charset="UTF-8">
    <title>Angular material app</title>

    <link href="angular-material.min.css" />
</head>
<body>

<script src="jquery-1.12.3.min.js"></script>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="angular-animate.min.js"></script>
<script src="angular-aria.min.js"></script>
<script src="angular-material.min.js"></script>

<md-toolbar class="md-menu-toolbar">
    <div class="md-toolbar-tools">
        Toolbar
    </div>
</md-toolbar>
<md-button class="md-fab" aria-label="FAB">
    button
</md-button>

<script>
var myApp = angular.module('myApp', ['ngRoute', 'ngMaterial']);
</script>

</body>
</html>

Did I miss something?

Thanks in advance

image.png

Anthoni Gardner

unread,

Aug 14, 2016, 1:12:54 PM8/14/16

to AngularJS

You have not attached your app to do the document body.
Replace the body tag with this :-

<body ng-app="myApp" ng-cloak>

this should then work :)

Ashwin Kumar

unread,

Aug 16, 2016, 12:52:10 AM8/16/16

to AngularJS

Hi Anthoni,

I have attached app to the <html> tag which should work fine as ng-app can be added either to <html> or <body> tag.
Also I have tried as per your suggestion but still the same.

Sander Elias

unread,

Aug 16, 2016, 3:55:59 AM8/16/16

to AngularJS

Hi Ashwin,

Your sample works fine in plunker (after making sure the libs load from a cdn!)

Regards

Sander

Reply all

Reply to author

Forward