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

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

Answer 2

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>