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.min.js"></script>
<div ng-app="myApp">
    <!-- Views -->
    <div ui-view="top"></div>
    <div ui-view="left"></div>
    <div ui-view="content"></div>
    <div ui-view="modal"></div>
    
    <!-- Links -->
    <a ui-sref="home.splash">Splash</a>
    <a ui-sref="home">Home</a>
    
    <!-- Templates -->
    <script type="text/ng-template" id="views/ui/top.html">
      <div>top.html</div>
    </script>
    <script type="text/ng-template" id="views/ui/left.html">
      <div>left.html</div>
    </script>
    <script type="text/ng-template" id="views/ui/content.html">
      <div>content.html</div>
    </script>
    <script type="text/ng-template" id="views/modals/splash.html">
      <div>sploosh.html</div>
        <img src="http://i.imgur.com/UtTUSgq.jpg">
    </script>
</div>

JavaScript

'use strict';

angular.module('myApp', ['ui.router'])
    .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise('/home');
    
        $stateProvider
          .state('home', {
            url: '/home',
            views: {
              top     : { templateUrl: 'views/ui/top.html' },
              left    : { templateUrl: 'views/ui/left.html' },
              content : { templateUrl: 'views/ui/content.html' }
            }
          })
          .state('home.splash', {
            url    : '/splash',
            views: {
              /*top     : { templateUrl: 'views/ui/top.html' },
              left    : { templateUrl: 'views/ui/left.html' },
              content : { templateUrl: 'views/ui/content.html' },*/
              
              'modal@'   : { templateUrl: 'views/modals/splash.html' }
            }
          });
        
    }]);