Davide Nale Davide Nale - 1 year ago 189
AngularJS Question

Angular-material how to build a sidenav menu that control a md-content?

i'm developing a mobile based on Angularjs and Angular-Material but i'm a bit confused on how to set up a menu.

here's my semplified situation:

inside of my

i have my
and an
, inside of my
there are all the

Question: how can i implement those
so that clicking them, a different content is shown in

For example when i click, 'home' a
with all the home's stuff appears and so on?

Answer Source

You probably use AngularJS with SPA (single page application) concept in mind, so why not make a try with an AngularJS routing module - which are particularly built for such purposes.

There are two popular routing modules for AngularJS, namely:

For the sake of simplicity, you can go with the first one.

Here's how you can set up your routes to display different templates into the ngView directive whenever you navigate to a particular route:


<!-- Your md-buttons -->
<a md-button href="#dashboard">Dashboard</a>
<a md-button href="#some-other-route">Some other route</a>
<!-- ... -->
    <div ng-view></div> <!-- This is where your templates (and their controllers) are injected -->


angular.module('yourApp', [
    // other dependencies

    * set up your routes here
    when('/dashboard', {
        template: '...'  // alernatively, `templateUrl` if your partial stays somewhere else,
        controller: function (){ 
           /* custom logic for the template */ 
    .when('/some-other-route', {
        template: '...',
        controller: function(){ ... }

Plunker Demo


Do not forget to load the script for ngRoute somewhere after loading angularJS in your HTML.

You may also take a look at $locationProvider service's html5Mode method for configuring how routes are to work (e.g. /dashboard instead of #dashboard) in your links.