Example App

Answer to: http://stackoverflow.com/questions/42466291/angular-ui-router-nested-views

by Sajeetharan Sinnathurai

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.min.js"></script>
<div>
  <header>
  <ul class="nav navbar-nav">
    <li class="active"><a ui-sref="root.started">Get Started</a></li>
    <li><a ui-sref="root.components">Components</a></li>
  </ul>
  </header>
  
  <section>
    <div class="view-fade-in" ui-view="side">Home Side Bar</div>
    <div class="view-fade-in" ui-view="main">Home Main Content</div>
  </section>
  
  <footer>Footer</footer>
</div>

SCSS

/*** NG-VIEW Animation ******************************/

.body {margin:25px;color:black;}
.body a {color:black;}
.mainTemplate {background-color:hotpink;}
.fullscreenTemplate {background-color:darkorange;}

section {
  display: flex;
  > div {
    padding: 5px;
    border: 1px solid black;
  }
}

.view-fade-in.ng-enter {
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  position: relative;
  opacity: 0;
}
.view-fade-in.ng-enter.ng-enter-active {
  opacity: 1;
}
.view-fade-in.ng-leave.ng-leave-active {
  opacity: 1;
}
.view-fade-in.ng-leave {
  opacity: 0;
}

JavaScript

(function() {
    'use strict';

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

                $stateProvider
                    .state('root', {
                        url: '',
                        abstract: true
                    })
                    .state("root.started", {
                        url: '/started',
                        views: {
                            'main@': {
                                template: 'Get Started'
                            },
                            'side@': {
                                template: `
                	<side-nav type="getstarted"/>
                `
                            }
                        }
                    })
                    .state("root.started.overview", {
                        url: '/started/overview',
                        views: {
                            'main@': {
                                template: 'Get Started > Overview'
                            }
                        }
                    })
                    .state("root.started.summary", {
                        url: '/started/summary',
                        views: {
                            'main@': {
                                template: 'Get Started > Summary'
                            }
                        }
                    })
                    .state("root.components", {
                        url: '/components',
                        views: {
                            'main@': {
                                template: 'Components'
                            },
                            'side@': {
                                template: `
                  <side-nav type="components"/>
                `
                            }
                        }
      ...