Javascript 角度材质如何构建控制md内容的sidenav菜单？

我正在开发一款基于Angularjs和AngularMaterial的手机，但我对如何设置菜单有点困惑

以下是我的简化情况：

在我的

身体内部

我有我的

md侧导航

和一个

md内容

，在我的

md侧导航

内部有所有的

md菜单按钮

问题：如何实现这些

md菜单按钮

，以便单击它们，在

md content

中显示不同的内容

---

例如，当我单击“主页”时，会出现一个包含所有主页内容的

div

，以此类推？

下面是一个简单的示例-

加价

<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>

---

您可能会将AngularJS与SPA（单页应用程序）概念结合使用，那么为什么不尝试使用AngularJS路由模块呢？它是专门为这种目的而构建的

AngularJS有两个流行的路由模块，即：

为了简单起见，您可以选择第一个

以下是如何设置路线，以便在导航到特定路线时，在

ngView

指令中显示不同的模板：

HTML

---

注意：如果侧导航在Plunker演示中尚未打开，请不要忘记从左上角打开侧导航

---

注 在HTML中加载angularJS后，不要忘了加载

ngRoute

的脚本

您还可以在链接中查看服务的

HTML5模式

方法，以配置路由的工作方式（例如

/dashboard

，而不是

#dashboard

）

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;
    };
});

<!-- 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>

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(){ ... }
    });
})