Davide Nale Davide Nale - 3 months ago 66
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

body
i have my
md-sidenav
and an
md-content
, inside of my
md-sidenav
there are all the
md-menu-buttons
.

Question: how can i implement those
md-menu-buttons
so that clicking them, a different content is shown in
md-content
.

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

Answer

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:

HTML

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

JS

angular.module('yourApp', [
    'ngRoute', 
    // other dependencies
])

.config(function($routeProvider){
    /* 
    * set up your routes here
    */
    $routeProvider.
    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

Note

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.

Comments