This demo shows how to use ui-router and a navigationService to created a tabbed layout. This demo illustrates state change tracking and hooking into the ui-router pipeline to take advantage of state management.

<html>
    <head>
        <title>Angular-UI Tabbed Layout</title>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-loader.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-cookies.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-touch.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-resource.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui-ieshiv.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
        
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="style.css">

        <script type='text/javascript' src="script.js"></script>
        <script type='text/javascript' src="https://rawgit.com/long2know/angular-demos-general/master/ui-router-tabbed-navigation/navigationService.js"></script>
        <script type='text/javascript' src="https://rawgit.com/long2know/angular-demos-general/master/ui-router-tabbed-navigation/appStates.js"></script>
    </head>    
    <body ng-app="myApp">
        <div ng-include="'menu.html'"></div>              
        <div ui-view="tabs" class="container-fluid"></div>
        
        <script type="text/ng-template" id="menu.html">
            <nav class="navbar navbar-default">
              <div class="container-fluid">
                <div class="navbar-header">
                    <span class="navbar-brand">Our Menu</span>
                </div>
              </div>
            </nav>
        </script>
        
        <script type="text/ng-template" id="tabs.html">
            <div class="row">
                <uib-tabset>
                    <uib-tab ng-repeat="tab in tc.appStates" heading="{{tab.heading}}" active="tab.active" disable="tab.disabled"
                                select="tc.tabSelected(tab.route)">
                    </uib-tab>
                </uib-tabset>
            </div>
            
            <div id="tabs-views" data-ui-view></div>
        </script>

        <script type="text/ng-template" id="state1.html">
            <div>
                <h1>This is State 1</h1>
            </div>
        </script>
        <script type="text/ng-template" id="state2.html">
            <div>
                <h1>This is State 2</h1>
            </div>
        </script>
        <script type="text/ng-template" id="state3.html">
            <div>
                <h1>This is State 3</h1>
            </div>
        </script>
        <script type="text/ng-template" id="state4.html">
            <div>
                <h1>This is State 4</h1>
            </div>
        </script>
    </body>
</html>

(function () {
    var long2know;
    try {
        long2know = angular.module("long2know")
    } catch (err) {
        long2know = null;
    }

    if (!long2know) {
        angular.module('long2know.services', ['ngResource', 'ngAnimate']);
        angular.module('long2know.controllers', []);
        angular.module('long2know.directives', []);
        angular.module('long2know.constants', []);
        angular.module('long2know',
            [
                'long2know.services',
                'long2know.controllers',
                'long2know.directives',
                'long2know.constants'
            ]);
    }

    var tabsCtrl = function ($state, $location, $filter, appStates, navigationService) {
        var
            vm = this,            
            initialize = function () {
                vm.appStates = appStates.states;
            };
        vm.tabSelected = function (route) {
            $state.go(route);
        };
        initialize();
    };

    tabsCtrl.$inject = ['$state', '$location', '$filter', 'appStates', 'navigationService'];
    angular
        .module('long2know.controllers')
        .controller('tabsCtrl', tabsCtrl);

    var myApp = angular.module('myApp', [
        'long2know.services',
        'long2know.controllers',
        'ngSanitize',
        'ui.bootstrap',
        'ui.router',
        'ui'
    ]);
    
    myApp.config(['$uibModalProvider', '$locationProvider', '$stateProvider', '$urlRouterProvider',
        function ($uibModalProvider, $locationProvider, $stateProvider, $urlRouterProvider) {
            $uibModalProvider.options = { animation: true, backdrop: 'static', keyboard: false };
            $locationProvider.html5Mode(false);

            $urlRouterProvider
                .when('/', '/state1')
                .otherwise("/state1");
                
            $stateProvider
                .state('tabs', {
                    abstract: true,
                    url: '/',
                    views: {
                        'tabs': {
                            controller: 'tabsCtrl as tc',
                            templateUrl: 'tabs.html',
                        }
                    }
                })
                .state('tabs.state1', {
                    url: 'state1',
                    templateUrl: 'state1.html',
                    controller: function () { },
                    reloadOnSearch: false
                })
                .state('tabs.state2', {
                    url: 'state2',
                    templateUrl: 'state2.html',
                    controller: function () { },
                    reloadOnSearch: false
                })
				.state('tabs.state3', {
				    url: 'state3',
				    templateUrl: 'state3.html',
				    controller: function () { },
				    reloadOnSearch: false
				})
                .state('tabs.state4', {
				    url: 'state4',
				    templateUrl: 'state4.html',
				    controller: function () { },
				    reloadOnSearch: false
				})
        }]);

    myApp.run(['$log', 'navigationService', function ($log, navigationService) {
        // Note, we need a reference to the navigationService so $state events are tracked.
        $log.log("Start.");
    }]);
})()

small {
    font-size: 0.625em;
    font-style: italic;
    color: #a94442;
    display: block;
    float:right;
}

input {
    display:block !important;
}

label {
    display:block;
}

.container {
    width: auto !important;
}

.form-inline .form-group {
    display:inline-block;
    width: auto;
}

form {
    width: 250px;
}

input {
    width: 250px !important;
}

This demo shows how to use ui-router and a navigationService to created a tabbed layout.  This demo illustrates state change tracking and hooking
into the ui-router pipeline to take advantage of state management.

  - [Blog](https://long2know.com/2016/01/angular-tabbed-navigation/)
  - [Github](https://github.com/long2know/angular-demos-general)