角度材質和md-nav-bar路由

我正在挖掘Angular，並決定使用Angular Material庫來協助我的第一個應用程序。到目前爲止，我已經從https://material.angularjs.org/1.1.0/demo/navBar複製了一些非常基本的代碼，我修改了這些代碼以適合自己的需要。我在路由和md-nav-items方面遇到了一些麻煩。角度材質和md-nav-bar路由

<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點擊，但它只是結束了重定向我的頁面，而不是在我的tabs/nav-bar下面填充內容;我回滾了我寫的JS和那部分HTML。我已經閱讀了這個領域中發佈的其他問題，我可以找到它們，但沒有提到基於導航欄項目渲染不同的部分。有什麼建議麼？我想我可以監視currentNavItem並根據它的值進行正確的部分渲染，但是我不確定如何實際渲染。

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

Here是它看起來像在本地運行的圖像。

在此先感謝！

最後編輯：

S/O，以@Searching幫助我得到它下面的工作。我已更新plnker link以反映這些更改。請注意，由於基本附加腳本，它會有一點滯後。

來源

2016-11-29 gslette

請新增plnker或JS小提琴鏈接 –

@NobalMohan [這裏]（https://plnkr.co/edit/1ZJu1hjt3brgQwOt1H9I）是我的plnker的鏈接。奇怪的是，它不能正確顯示在爬蟲預覽，但通過支架實時預覽。 [這裏]（https://imgur.com/gallery/g1sYj）就是它在本地的樣子。 – gslette

對於你的闖入者，你只需要通過'https'而不是'http'加載樣式表.. – Searching

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

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

index.html：更新您的鏈接，看起來像這樣。使用html5Mode當你需要base標籤：使用md-nav-href

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

的index.html。而不是手動指定它只是使用下面的腳本。確保你在這個腳本之前加載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' 
    }); 
});

來源

2016-12-01 02:20:51 Searching

謝謝你的幫助。有用！！！我真的很困惑，爲什麼意見在改變了一切之後一開始就無法呈現，並且意識到我忘了添加

：D再次感謝！ – gslette

角度材質和md-nav-bar路由

回答

相關問題