javascript - Angular-material 如何构建控制 md-content 的 sidenav 菜单？

Question

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

这是我的简化情况:

在我的 body 里面 我有我的 md-sidenav 和一个 md-content，在我的 md-sidenav 有所有 md-menu-buttons。

问题:我如何实现那些md-menu-buttons以便点击它们，不同的内容显示在md-content中。

例如，当我点击时，“家”会出现一个包含所有家的东西的 div 等等？

Answer 1

您可能在使用 AngularJS 时考虑了 SPA(单页应用程序)概念，那么为什么不尝试使用 AngularJS 路由模块 - 它是专门为此类应用程序构建的目的。

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

• ngRoute
• UI router

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

以下是如何设置路由，以便在导航到特定路由时在 ngView 指令中显示不同的模板:

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

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

---

注意事项

在 HTML 中加载 angularJS 后，不要忘记在某处加载 ngRoute 的脚本。

您也可以看看 $locationProvider服务的 html5Mode 方法，用于配置链接中路由的工作方式(例如 /dashboard 而不是 #dashboard)。