How to enable lazy loading of tabs in tabset in Angular js?

Question

I create <tabset>to display the content on the page. I also use the Bootstrap and Lazy Data Loading tabs so that the controller for a specific tab is initialized only when it is active. I can achieve lazy loading for tabs.

<div id="panel" ng-controller="HomeController as hmctrl">
<tabset>
<tab  class="nav-item" id="tab_content" title="Tab1" template-url="app/components/tab1/tab1.html"></tab>
<tab  class="nav-item" id="tab_content" title="Tab2" template-url="app/components/tab2/tab2.html"></tab>
<tab  class="nav-item" id="tab_content" title="Tab3" template-url="app/components/tab3/tab3.html"></tab>
</tabset>
</div>

In my app.config, I have only one route for the main page

var app = angular.module('myApp', ['bootstrap.tabset','ngRoute']);

app.config(
  function($routeProvider,$locationProvider) {
    $routeProvider
    .when('/', {
        templateUrl: 'app/components/home/homeView.html'
    });
});

Each tab is assigned a separate controller. I would like to know how to assign routes to any specific tabs when creating this path. So that I can go to them using the function $location.path().

I created plnkr for the same here Plnkr for the above scenario

Answer 1

$stateProvider $routeProvider. https://plnkr.co/edit/lL9JVRmuE8kQ5f0WhRDo?p=preview

var app = angular.module('myApp', ['bootstrap.tabset','ngRoute','ui.router']);

app.config(
  function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/Home");

    $stateProvider
    .state('Home', {
      url: "/Home",
      templateUrl: "home.html"
    })
    .state('Home.Tab1', {
      url: "/Tab1",
      templateUrl: "tab1.html"
    })
    .state('Home.Tab2', {
      url: "/Tab2",
      templateUrl: "tab2.html"
    })
    .state('Home.Tab3', {
      url: "/Tab3",
      templateUrl: "tab3.html"
    });

});

Index.html - ui-view ng-view

<div class="ui-view"></div>

home.html

<div id="panel" ng-controller="HomeController as hmctrl">
  <p>Home</p>
<tabset>
<tab  class="nav-item" id="tab_content" title="Tab1" ui-sref=".Tab1"></tab>
<tab  class="nav-item" id="tab_content" title="Tab2" ui-sref=".Tab2"></tab>
<tab  class="nav-item" id="tab_content" title="Tab3" ui-sref=".Tab3"></tab>
</tabset>

<div ui-view></div>
</div>

URL #/Home/Tab1, #/Home/Tab2, #/Home/Tab3 :

 $state.go("Home.Tab2");//navigates to Tab2 of Home page

- https://github.com/angular-ui/ui-router

, script

Answer 2

,

app.config(
  function($routeProvider,$locationProvider) {
    $routeProvider
    .when('/', {
        templateUrl: 'app/components/home/homeView.html'
        controller:'HomeCtrl'
    });
   .when('/Tab1', {
        templateUrl: 'app/components/tab1/Tab1.html',
        controller:'Tab1Ctrl'
    });
})

Answer 3

$routeParams. .

, .

app.config(
  function($routeProvider,$locationProvider) {
    $routeProvider
    .when('/:tabId', {
        templateUrl: 'app/components/home/homeView.html',
        controller:'HomeController'
    });
});

Then in HomeControlleryou can access the service $routeParamsto get the current value tabId.

app.controller('HomeController', function($scope, $routeParams) {
    $scope.activeTab = $routeParams.tabId;
});

Set the corresponding tab property.

<tab  active="{{activeTab == 1}}" class="nav-item" id="tab_content" title="Tab1" template-url="app/components/tab1/tab1.html" active="{{activeTab == 1}}"></tab>
<tab  active="{{activeTab == 2}}" class="nav-item" id="tab_content" title="Tab2" template-url="app/components/tab2/tab2.html"></tab>
<tab  active="{{activeTab == 3}}" class="nav-item" id="tab_content" title="Tab3" template-url="app/components/tab3/tab3.html"></tab>

Then you can call your tabs like <baseurl>/1,<baseurl>/2