CODEWITHSUNDEEP
javascripthtmlcssangularjsangular-material
gslette
gslette

Reputation: 79

Angular Material and md-nav-bar routing

I'm digging into Angular and have decided to use the Angular Material library to assist in my first application. 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. I'm having some trouble wrapping my head around routing and the 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:

(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.

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; I rolled back the JS I had written and that part of the 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.

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.

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. I've updated the plnker link to reflect the changes. Note it gets a little laggy due to the base append script.

Upvotes: 1

Views: 6226

Answers (1)

Searching
Searching

Reputation: 2279

ngRoute: When $route service you will need ng-view container. 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. The currentNavItem is set by md-selected-nav-item which is not what you need. Let's route with your setup

index.html : update your links to look like this. Use 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. Instead of manually specifying it just use the script below. Make sure you load angular.js before this script.

<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. 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'
    });
});

Upvotes: 3

Related Questions