Enzo Volkmann Enzo Volkmann - 3 months ago 143
AngularJS Question

md-nav-bar not rendering, only showing plain text

I have a problem with the Angular Material directive "md-nav-bar". It is not rendering in my code. I tried copying various working pieces of code, but I didn't manage to get it running.

HTML

<body ng-app="app" ng-controller="MainController">

<md-content layout="row">
<md-toolbar class="md-hue-2">
<div class="md-toolbar-tools">
<md-button class="md-icon-button" aria-label="Home" href="#/welcome">
<i class="material-icons">explore</i>
</md-button>
<h2 href="#/welcome">
md-nav-bar Test
</h2>
<span flex></span>
<md-button class="md-icon-button" aria-label="Coontact Us" href="mailto:info@osterdach.de">
<i class="material-icons">email</i>
</md-button>
<md-button class="md-icon-button" aria-label="Call Us" href="tel:+4915732224836">
<i class="material-icons">phone</i>
</md-button>
</div>
</md-toolbar>
</md-content>

<md-content>
<md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
<md-nav-item md-nav-href="#/holzbau" name="page5">Holzbau</md-nav-item>
<md-nav-item md-nav-href="#/dach" name="page5">Dach</md-nav-item>
<md-nav-item md-nav-href="#/fassade" name="page5">Fassade</md-nav-item>
<md-nav-item md-nav-href="#/erhaltUndEnergie" name="page5">Erhalt und Energie</md-nav-item>
</md-nav-bar>
</md-content>

<md-content>
<p><strong>The Routing is working properly, so I am not including it completely here!</strong></p>
<a href="#/holzbau">Holzbau</a> |
<a href="#/dach">Dach</a> |
<a href="#/fassade">Fassade</a> |
<a href="#/erhaltUndEnergie">Erhalt und Energie</a>
</md-content>

<hr>

<md-content ng-view layout="row" layout-align="center"></md-content>
</body>


app.js

var app = angular.module("app", ["ngRoute", "ngMaterial"]);

/* ROUTING & THEMING */
app.config(function ($mdThemingProvider, $routeProvider) {

/* ROUTING */
$routeProvider
.when("/holzbau", {
templateUrl : "views/holzbau.html"
})
.when("/dach", {
templateUrl : "views/dach.html"
})
.when("/fassade", {
templateUrl : "views/fassade.html"
})
.when("/erhaltUndEnergie", {
templateUrl : "views/erhaltUndEnergie.html"
})
.when("/welcome", {
templateUrl : "views/welcome.html"
})
.otherwise({
templateUrl : "views/welcome.html"
});
/* END ROUTING */

/* THEMING */
var customPrimary = {
'50': '#3defff',
'100': '#24ecff',
'200': '#0aeaff',
'300': '#00dcf0',
'400': '#00c4d6',
'500': '#00ADBD',
'600': '#0096a3',
'700': '#007e8a',
'800': '#006770',
'900': '#005057',
'A100': '#57f1ff',
'A200': '#70f3ff',
'A400': '#8af5ff',
'A700': '#00383d'
};
$mdThemingProvider
.definePalette('customPrimary',
customPrimary);

var customAccent = {
'50': '#68070b',
'100': '#80090d',
'200': '#970b10',
'300': '#af0c12',
'400': '#c70e15',
'500': '#df1017',
'600': '#f13138',
'700': '#f2494f',
'800': '#f46166',
'900': '#f6787d',
'A100': '#f13138',
'A200': '#EF1921',
'A400': '#df1017',
'A700': '#f79094'
};
$mdThemingProvider
.definePalette('customAccent',
customAccent);

var customWarn = {
'50': '#949eb6',
'100': '#8590ab',
'200': '#7582a1',
'300': '#677496',
'400': '#5c6987',
'500': '#525D78',
'600': '#485169',
'700': '#3d465a',
'800': '#333a4b',
'900': '#292e3b',
'A100': '#a3abc0',
'A200': '#b2b9ca',
'A400': '#c1c7d5',
'A700': '#1e222c'
};
$mdThemingProvider
.definePalette('customWarn',
customWarn);

var customBackground = {
'50': '#ffffff',
'100': '#ffffff',
'200': '#ffffff',
'300': '#f4fbfb',
'400': '#e1f5f4',
'500': '#CEEEED',
'600': '#bbe7e6',
'700': '#a8e1df',
'800': '#95dad8',
'900': '#82d4d1',
'A100': '#ffffff',
'A200': '#ffffff',
'A400': '#ffffff',
'A700': '#6fcdca'
};
$mdThemingProvider
.definePalette('customBackground',
customBackground);

$mdThemingProvider.theme('default')
.primaryPalette('customPrimary')
.accentPalette('customAccent')
.warnPalette('customWarn')
.backgroundPalette('customBackground')
/* END THEMING */

});
/* END app.config */

app.controller("MainController", function($scope, $route) {

});


See this Pen with my code: http://codepen.io/anon/pen/pbBOdv

Answer

You need to load the Angular Material CSS file and update the JS file - CodePen

CSS: https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0/angular-material.css

JS: http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc.5/angular-material.min.js

You also need to make the name of each md-nav-item unique:

<md-nav-item md-nav-href="#/holzbau" name="page1">Holzbau</md-nav-item>
<md-nav-item md-nav-href="#/dach" name="page2">Dach</md-nav-item>
<md-nav-item md-nav-href="#/fassade" name="page3">Fassade</md-nav-item>
<md-nav-item md-nav-href="#/erhaltUndEnergie" name="page4">Erhalt und Energie</md-nav-item>