AngularJS routing with redirection

Question

I'm working on AngularJS with ng-route, have a navigation Matches, Standings and when I click on Matches I want to open a sub navigation All, 1st Round, Semi Finals ... and I want by default the allmatches.html view to be displayed below.

I wrote something like this:

$routeProvider
  .when('/matches', {
    templateUrl: 'views/matchesmenu.html',
    controller: 'matchesmenuCtrl',
  })

to display the matches sub navigation once I click on Matches and it works fine. What can I do now to display the allmatches.html just below it (I mean by that route to matches/all

I tried to add

redirectTo : '/matches/all'

in

 .when('/matches', {
    templateUrl: 'views/matchesmenu.html',
    controller: 'matchesmenuCtrl',
  })

but it redirects without displaying the sub navigation.

Example on plnkr: https://plnkr.co/edit/UoTcOlcDQSwveCTbmxyY?p=preview

The sub nav contains dynamic items received from a factory/controller. I couldn't find a better solution. If I route directly to matches/all when I click on Matches, what I can do when I click on another item in sub nav? For example, when I click on Semi Finals how can I keep the sub nav displayed and replace the below content with the content relative to semi finals? — EddyG
– EddyG, Commented Mar 13, 2017 at 8:42
You could achieve that by switch on ui-router instead of using $routeProvier. In that way you could create state linke like <a ui-srer="your.state">Submenu item</a>. — lin
– lin, Commented Mar 13, 2017 at 8:50
I never used ui-router can you explain more what I must do? Or provide me with a link to an example? — EddyG
– EddyG, Commented Mar 13, 2017 at 8:54
Do you need to have your sub-nav section in a separate view? They are just gonna be just list of links rite? Why not have them in the same html as your nav items. Bind the sub-nav list to a scope variable. When user clicks on any of the nav item, assign the sub-nav items to the above scope variable. Hope this answers your question — Keerthi Kumar P
– Keerthi Kumar P, Commented Mar 13, 2017 at 8:54

lin · Accepted Answer · 2017-03-13 11:06:16Z

1

Allright, here your are - runnable plnkr. This provides a simple tab handling logic for you.

TabView

<div ng-controller="TabCtrl">
  <ul class="nav nav-tabs">
    <li role="presentation" ng-class="{'active' : activeTab === 'all'}">
      <a ng-click="activeTab = 'all'">All</a>
    </li>
    <li role="presentation" ng-class="{'active' : activeTab === 'first-round'}">
      <a ng-click="activeTab = 'first-round'">1st Round</a>
    </li>
    <li role="presentation" ng-class="{'active' : activeTab === 'semi-finals'}">
      <a ng-click="activeTab = 'semi-finals'">Semi Finals</a>
    </li>
    <li role="presentation" ng-class="{'active' : activeTab === 'finals'}">
      <a ng-click="activeTab = 'finals'">Final</a>
    </li>
  </ul> 
  <div>
    <div class="" ng-switch="activeTab">
        <div ng-switch-when="all">
            <div data-ng-include="'first-round.html'"></div>
            <div data-ng-include="'semifinals.html'"></div>
            <div data-ng-include="'finals.html'"></div>
        </div>
        <div ng-switch-when="first-round">
            <div data-ng-include="'first-round.html'"></div>
        </div>
        <div ng-switch-when="semi-finals">
            <div data-ng-include="'semifinals.html'"></div>
        </div>
        <div ng-switch-when="finals">
            <div data-ng-include="'finals.html'"></div>
        </div>
    </div>
  </div>
</div>

AngularJS application

var app = angular.module('myApp',['ngRoute'])
.config(function ($routeProvider) {
    $routeProvider
      .when('/matches', {
        templateUrl: 'matchesmenu.html'
      })
      .when('/matches/all', {
        templateUrl: 'allmatches.html'
      })

}).controller('TabCtrl', function ($scope) {
    $scope.activeTab = 'all';
});

edited Mar 13, 2017 at 11:06

answered Mar 13, 2017 at 10:57

lin

18.5k4 gold badges66 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

EddyG Over a year ago

Yeah good one. I only wish to know if its possible to update the uri when I click on a sub nav tab. For example, clicking on 1st round tab will make my uri /matches/1stround, and when im on all make it matches/all? If it's complicated the solution you provided is fine for me, thanks.

lin Over a year ago

@EddyG You can achieve this with ui-router instead of ngRoute. e.g. $state.go('your.state', {}, {notify: false}) . Where notify: false will not force to rerender your application, it just change the URL based on your state.

lin Over a year ago

@EddyG is this enough help to get the tick? =)

EddyG Over a year ago

Thank you @lin for your efforts. I learned how to use ui.router and it seems better than ngRoute as you said.

lin Over a year ago

Cheers m8 =) Glad to help ya

Dushyantha · Accepted Answer · 2017-03-13 11:19:31Z

Try this Define your sub menu in controller level

$scope.tabs = [
            {title: 'All', url: 'allmatches.html', active: true, type: 'all'},
            {title: '1st Round', url: 'semiFinals.html', active: false, type: 'semi'}
        ];

//handle tab click event

$scope.tabClick = function (index) {
            angular.forEach($scope.tabs, function (tab) {
                tab.active = false;
            });
            $scope.selectedTab = index;
            $scope.tabs[index].active = true;
        };

After that matchesmenu.html load content using ng-include option

<div class="row clearfix">
  <div class="col-xs-12">
    <ul class="nav nav-tabs">
        <li role="presentation" ng-class="{'active':tab.active}" ng-repeat="tab in tabs" ><a href="#/log/{{tab.type}}" >{{tab.title}}</a></li>

    </ul>
  </div>
</div>

<div class="row clearfix">

            <div class="col-xs-12"  ng-repeat="tab in tabs"  ng-model="tab" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
              <div ng-include src="tab.url" ng-if="tab.active"> </div>
            </div>

</div>
</div>

Collectives™ on Stack Overflow

AngularJS routing with redirection

2 Answers 2

TabView

AngularJS application

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

TabView

AngularJS application

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related