Angular Material和md-nav-bar路由

Question

I'm digging into Angular and have decided to use the Angular Material library to assist in my first application. 我正在深入研究Angular并决定使用Angular Material库来协助我的第一个应用程序。 So far I have some very basic code I copied from https://material.angularjs.org/1.1.0/demo/navBar which I have modified to fit my own needs. 到目前为止，我已经从https://material.angularjs.org/1.1.0/demo/navBar复制了一些非常基本的代码，我已经修改了这些代码以满足我自己的需要。 I'm having some trouble wrapping my head around routing and the md-nav-items. 我在绕过路由和md-nav-items时遇到了一些麻烦。

<html>

<head>
    <title>PRT - CIT</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" </meta>
    <!-- Angular Material style sheet -->
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> </head>

<body ng-app="MyApp" id="bootstrap-overrides">
    <div ng-controller="AppCtrl" ng-cloak="" class="navBardemoBasicUsage main">
        <md-content class="md-padding">
            <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
                <md-nav-item md-nav-click="goto('queue')" name="queue">Queue</md-nav-item>
                <md-nav-item md-nav-click="goto('detail')" name="detail">Detail</md-nav-item>
                <md-nav-item md-nav-click="goto('request')" name="request">Request</md-nav-item>
                <!-- these require actual routing with ui-router or ng-route, so they won't work in the demo
          <md-nav-item md-nav-sref="app.page4" name="page4">Page Four</md-nav-item>
          <md-nav-item md-nav-href="#page5" name="page5">Page Five</md-nav-item>
          --></md-nav-bar>
            <div class="ext-content"> External content for `<span>{{currentNavItem}}</span>` </div>
        </md-content>
    </div>

        <script src="node_modules/angular/angular.js"></script>
        <script src="node_modules/angular-resource/angular-resource.js"></script>
        <script src="node_modules/angular-animate/angular-animate.js"></script>
        <script src="node_modules/angular-route/angular-route.js"></script>
        <script src="node_modules/angular-aria/angular-aria.js"></script>
        <script src="node_modules/angular-messages/angular-messages.js"></script>
        <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
        <script src="node_modules/angular-material/angular-material.js"></script>
        <script src="js/site.js"></script>
        <link rel="stylesheet" href="/css/site.css">
</body>

</html>

Here's my JS: 这是我的JS：

(function () {
    'use strict';
    var MyApp = angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache', 'ngRoute']).controller('AppCtrl', AppCtrl);

    function AppCtrl($scope) {
        $scope.currentNavItem = 'queue';
    }
    MyApp.config(function ($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: '/index.html'
            , controller: 'AppCtrl'
        }).when('/queue', {
            templateUrl: '/partials/queue.html'
            , controller: 'AppCtrl'
        }).when('/detail', {
            templateUrl: '/partials/detail.html'
            , controller: 'AppCtrl'
        }).when('/request', {
            templateUrl: '/partials/request.html'
            , controller: 'AppCtrl'
        });
    });
})();

I'm kind of lost as to how I should route the tabs. 关于如何路由选项卡，我有点迷茫。 From what I've read, md-nav-bar has some routing built in, but I've found examples utilizing ngRoute as well ui-router. 从我读过的内容来看，md-nav-bar内置了一些路由，但我发现了使用ngRoute以及ui-router的例子。

I'm also confused as to actually populate my partial views in the 我也很困惑，实际上填充了我的部分视图

<div class="ext-content"> External content for `<span>{{currentNavItem}}</span>` </div>

I tried using md-nav-href instead of md-nav-click but it just ended up redirecting me to the pages, not populating the content below my tabs/nav-bar; 我尝试使用md-nav-href而不是md-nav-click，但它最终将我重定向到了页面，而不是填充我的tabs / nav-bar下面的内容; I rolled back the JS I had written and that part of the HTML. 我回滚了我写的JS和HTML的那部分。 I've read the other questions posted in this area that I could find but none addressed rendering different partials based on nav-bar item. 我已经阅读了在这个区域发布的其他问题，我可以找到，但没有解决基于导航栏项目渲染不同的部分。 Any suggestions? 有什么建议么？ I was thinking I could monitor currentNavItem and have the right partial render based on the value of it, but again, I'm not sure how to actually do the rendering. 我以为我可以监视currentNavItem并根据它的值进行正确的局部渲染，但同样，我不确定如何实际渲染。

Here is a Plnker that doesn't render correctly in the preview for some reason, but the code is the same as what I have locally. 这是一个由于某种原因在预览中无法正确呈现的Plnker，但代码与我在本地的代码相同。

Here is an image of what it looks like running locally. 这是一个在本地运行的图像。

Thanks in advance! 提前致谢！

Final Edit: 最终编辑：

S/O to @Searching for helping me get it working below. @Searching的S / O帮助我让它在下面工作。 I've updated the plnker link to reflect the changes. 我已更新了plnker链接以反映更改。 Note it gets a little laggy due to the base append script. 请注意，由于基础追加脚本，它会有点滞后。

Answer 1

ngRoute : When $route service you will need ng-view container. ngRoute ： $route service时你需要ng-view容器。 This will be used to load all you routed pages. 这将用于加载您所有路由的页面。

You do not have a goto() so just use simple md-nav-href tags to navigate around. 你没有goto()所以只需使用简单的md-nav-href标签来导航。 The currentNavItem is set by md-selected-nav-item which is not what you need. currentNavItem由md-selected-nav-item ，这不是您需要的。 Let's route with your setup 让我们按照您的设置进行路线

index.html : update your links to look like this. index.html：将您的链接更新为这样。 Use md-nav-href 使用md-nav-href

<md-nav-item md-nav-href="queue" name="queue">Queue</md-nav-item>

index.html : when using html5Mode you will need base tag. index.html：使用html5Mode您需要base标记。 Instead of manually specifying it just use the script below. 而不是手动指定它只是使用下面的脚本。 Make sure you load angular.js before this script. 确保在此脚本之前加载angular.js。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>    
<script type="text/javascript">
angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
</script>

script : enable html5molde, why.. too many resources out there. 脚本：启用html5molde，为什么..那里有太多资源。 I encourage you to lookup :) 我鼓励你查找:)

MyApp.config(function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true)
    $routeProvider.when('/', {
        templateUrl : 'index.html',
        controller : 'AppCtrl'
    }).when('/queue', {
        templateUrl : 'queue_partial.html',//actual location will vary according to your local folder structure
        controller : 'AppCtrl'
    }).when('/detail', {
        templateUrl : 'detail_partial.html',
        controller : 'AppCtrl'
    }).when('/request', {
        templateUrl : 'request_partial.html',
        controller : 'AppCtrl'
    });
});

Angular Material和md-nav-bar路由

问题描述

1 个解决方案

解决方案1
3 已采纳 2016-12-01 02:20:51

Angular Material和md-nav-bar路由

问题描述

1 个解决方案

解决方案1 3 已采纳 2016-12-01 02:20:51

解决方案1
3 已采纳 2016-12-01 02:20:51