CODEWITHSUNDEEP
javascripthtmlangularjsangular-material
Davide Nale
Davide Nale

Reputation: 181

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?

Upvotes: 2

Views: 8924

Answers (2)

Ahmad Baktash Hayeri
Ahmad Baktash Hayeri

Reputation: 5880

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 open the side-nav from the top left if it's not open already in the 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.

Upvotes: 4

camden_kid
camden_kid

Reputation: 12813

Here's a simple example - CodePen

Markup

<div ng-controller="AppCtrl" layout="column" style="height:500px;" ng-cloak="" class="sidenavdemoBasicUsage" ng-app="MyApp">
  <section layout="row" flex="">
    <md-sidenav class="md-sidenav-left" md-component-id="left" md-whiteframe="4" id="leftSideNav" md-disable-backdrop="true">
      <md-toolbar class="md-theme-indigo" layout="row">
        <h1 class="md-toolbar-tools">Sidenav Left</h1>
        <span flex></span>
        <md-button ng-click="close()">Close</md-button>
      </md-toolbar>
      <md-content layout-padding="" layout="column" layout-align="start start">
        <md-button ng-click="show('home')" class="md-primary">Show Home</md-button>
        <md-button ng-click="show('work')" class="md-primary">Show Work</md-button>
      </md-content>
    </md-sidenav>

    <md-content flex="" layout-padding="" layout="column" layout-align="top center">
      <md-button ng-click="toggleLeft()" class="md-primary">
        Toggle left
      </md-button>
      <div ng-switch="toShow">
        <div ng-switch-when="home">
          Home!
        </div>
        <div ng-switch-when="work">
          Work!
        </div>
      </div>
    </md-content>
  </section>
</div>

JS

angular
  .module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
  .controller('AppCtrl', function ($scope, $mdSidenav) {
   $scope.toShow = "home"; // Default

    $scope.toggleLeft = function() {
        $mdSidenav("left")
          .toggle();
    };

    $scope.close = function () {
      $mdSidenav('left').close();
    };

    $scope.show = function (toShow) {
      $scope.toShow = toShow;
    };
});

Upvotes: 3

Related Questions