AngularJS UI Router child example

An example of how to do child states without using nested views.

HTML

<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<div ng-app=myApp>
    <!-- this direct way of creating a static "view" is quite faster
         than the child view demonstrated in ui-view="navbar", but both work -->
    <ul class="nav" ng-controller="navController">
        <li ng-class="{active: $state.is('test')}"    ><a ng-href="#/test">test</a></li>
        <li ng-class="{active: $state.is('test.sub')}"><a ng-href="#/test/sub">test.sub</a></li>
    </ul>
    <div ui-view></div>
    <div ui-view="navbar"></div>
</div>

CSS

.nav {
    list-style: none;
    padding:0;
    overflow: hidden;
}
.nav li {
    display: inline-block;
    position: relative;
    padding: 0;
    background: rgba(0,0,0, 0.2);
    padding: 0 .4em;
    float: left;
    margin-left: 0.5em;
}
.nav li.active {
    background: rgba(0,255,0, 0.2);
}
.nav li::after {
    content: "";
    display: block;
    position: absolute;
    right: -.4em;
    top: 50%;
    margin-top: -.65em;
    border-bottom: .65em solid white;
    border-top: .65em solid white;
    border-right: none;
    border-left: .4em solid rgba(0,0,0, 0.2);
}
.nav li.active::after {
    border-left: .4em solid rgba(0,255,0, 0.2);
}
.nav li:nth-child(n+2)::before {
    content: "";
    display: block;
    position: absolute;
    left: -.35em;
    top: 50%;
    margin-top: -.65em;
    border-bottom: .65em solid rgba(0,0,0, 0.2);
    border-top: .65em solid rgba(0,0,0, 0.2);
    border-right: none;
    border-left: .4em solid transparent;
}
.nav li.active:nth-child(n+2)::before {
    border-bottom: .65em solid rgba(0,255,0, 0.2);
    border-top: .65em solid rgba(0,255,0, 0.2);
}

JavaScript

'use strict';

var navbar_default_state = {
    template: (
        'Current state: {{$state.$current.name}}.<br>'+
        '<ul class="nav">'+
        '<li ng-class="{active: $state.is(\'test\')}"    ><a href="#/test"    >test</a></li>'+
        '<li ng-class="{active: $state.is(\'test.sub\')}"><a href="#/test/sub">test.sub</a></li>'+
        '</ul>'
    ),
    controller: 'navController'
};
angular.module('myApp', ['ui.router'])
    .controller('myController', ['$scope', '$state', function ($scope, $state) {
        $scope.$state = $state;
        $scope.greeting = 'Hello World!';
    }])
    .controller('navController', ['$scope', '$state', function ($scope, $state) {
        $scope.$state = $state;
    }])
    .config(['$routeProvider', '$stateProvider', function ($routeProvider, $stateProvider) {
        //$routeProvider.when('', {
        //    redirectTo: '/test'
        //});
        $stateProvider
        .state('default', {
            url: '',
            views: {
                'navbar': navbar_default_state
            }
        })
        .state('test', {
            url: '/test',
            views: {
                '': {
                    template: 'Index.',
                    controller: 'myController'
                },
                'navbar': navbar_default_state
            }
        })
        .state('test.sub', {
            url: '/sub',
            views: {
                '@': {
                    template: '{{greeting}}',
                    controller: 'myController'
                }
            }
        });
}]);