Angular Material和md-nav-bar路由

Question

我正在深入研究Angular並決定使用Angular Material庫來協助我的第一個應用程序。 到目前為止，我已經從https://material.angularjs.org/1.1.0/demo/navBar復制了一些非常基本的代碼，我已經修改了這些代碼以滿足我自己的需要。 我在繞過路由和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>

這是我的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'
        });
    });
})();

關於如何路由選項卡，我有點迷茫。 從我讀過的內容來看，md-nav-bar內置了一些路由，但我發現了使用ngRoute以及ui-router的例子。

我也很困惑，實際上填充了我的部分視圖

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

我嘗試使用md-nav-href而不是md-nav-click，但它最終將我重定向到了頁面，而不是填充我的tabs / nav-bar下面的內容; 我回滾了我寫的JS和HTML的那部分。 我已經閱讀了在這個區域發布的其他問題，我可以找到，但沒有解決基於導航欄項目渲染不同的部分。 有什么建議么？ 我以為我可以監視currentNavItem並根據它的值進行正確的局部渲染，但同樣，我不確定如何實際渲染。

這是一個由於某種原因在預覽中無法正確呈現的Plnker，但代碼與我在本地的代碼相同。

這是一個在本地運行的圖像。

提前致謝！

最終編輯：

@Searching的S / O幫助我讓它在下面工作。 我已更新了plnker鏈接以反映更改。 請注意，由於基礎追加腳本，它會有點滯后。

Answer 1

ngRoute ： $route service時你需要ng-view容器。 這將用於加載您所有路由的頁面。

你沒有goto()所以只需使用簡單的md-nav-href標簽來導航。 currentNavItem由md-selected-nav-item ，這不是您需要的。 讓我們按照您的設置進行路線

index.html：將您的鏈接更新為這樣。 使用md-nav-href

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

index.html：使用html5Mode您需要base標記。 而不是手動指定它只是使用下面的腳本。 確保在此腳本之前加載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>

腳本：啟用html5molde，為什么..那里有太多資源。 我鼓勵你查找:)

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