Javascript 角度材质1左侧导航内容部分中的多视图渲染

我要创建一个网页与角材料1。在网页中，我将显示一个工具栏和左导航（一种母版页）。在页面的内容部分（md内容）（左侧菜单的右侧），我将显示多个相互独立的视图。 请给我建议一个方法。是否使用ng开关、ng包含或单独嵌套控制器（其中父级为AppCtrl）或独立控制器。请注意，我将使用ng route根据显示的内容/单击的菜单项更新url

从

左侧导航
关闭左侧导航

此sidenav已在您的设备上锁定打开。要返回默认行为，
缩小显示范围。

侧导航右
测试输入
右近侧导航

<div ng-controller="AppCtrl" layout="column" style="height:500px;" ng-cloak="" class="sidenavdemoBasicUsage" ng-app="MyApp">

<md-sidenav class="md-sidenav-left" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')" md-whiteframe="4">

  <md-toolbar class="md-theme-indigo">
    <h1 class="md-toolbar-tools">Sidenav Left</h1>
  </md-toolbar>
  <md-content layout-padding="" ng-controller="LeftCtrl">
    <md-button ng-click="close()" class="md-primary" hide-gt-md="">
      Close Sidenav Left
    </md-button>
    <p hide="" show-gt-md="">
      This sidenav is locked open on your device. To go back to the default behavior,
      narrow your display.
    </p>
  </md-content>

</md-sidenav>

<md-content flex="" layout-padding="">



</md-content>

<md-sidenav class="md-sidenav-right md-whiteframe-4dp" md-component-id="right">

  <md-toolbar class="md-theme-light">
    <h1 class="md-toolbar-tools">Sidenav Right</h1>
  </md-toolbar>
  <md-content ng-controller="RightCtrl" layout-padding="">
    <form>
      <md-input-container>
        <label for="testInput">Test input</label>
        <input type="text" id="testInput" ng-model="data" md-autofocus="">
      </md-input-container>
    </form>
    <md-button ng-click="close()" class="md-primary">
      Close Sidenav Right
    </md-button>
  </md-content>

</md-sidenav>