AngularJS : advanced routing with AngularUI Router (ui.router) implementing multiple & named Views

AngularJS : basic routing with AngularUI Router (ui.router) having multiple ui-views per template.

by Daan De Smedt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
<!--
  AngularJS
  ----------
  AngularJS : advanced routing with AngularUI Router (ui.router) 
  Implementing multiple & named Views
-->

<div ng-app="app">

  <!-- top view -->
  <script type="text/ng-template" id="views/top.html">
    <h1>{{::vm.pageTitle}}</h1>
  </script>
  <script type="text/ng-template" id="views/bottom.html">
    <p>{{::vm.pageContent}}</p>
  </script>

  <!-- navigation -->
  <div class="navigation">
    <a ui-sref="home">Home</a>
    <a ui-sref="about">About</a>
  </div>
  <!-- ui-view container -->
  <div ui-view="viewTop"></div>
  <div ui-view="viewBottom"></div>

</div>

CSS

.navigation a {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

JavaScript

angular
  .module('app', ['ui.router'])
  .config(RouteConfig)

/* define routes with controller & controllerAs syntax */
function RouteConfig($stateProvider, $urlRouterProvider) {
  // set default state to home
  $urlRouterProvider.otherwise("/home");
  // provide states
  $stateProvider

    .state('home', {
    url: "/home",
    views: {
      "viewTop": {
        templateUrl: "views/top.html",
        controller: function(){
        	var vm = this;
 					vm.pageTitle = "Homepage";
        },
    		controllerAs: 'vm'
      },
      "viewBottom": {
        templateUrl: "views/bottom.html",
        controller: function(){
        	var vm = this;
 					vm.pageContent = "Homepage us content";
        },
    		controllerAs: 'vm'
      }
    }
  })
  .state('about', {
    url: "/about",
    templateUrl: 'views/page.html',
    views: {
      "viewTop": {
        templateUrl: "views/top.html",
        controller: function(){
        	var vm = this;
 					vm.pageTitle = "About us";
        },
    		controllerAs: 'vm'
      },
      "viewBottom": {
        templateUrl: "views/bottom.html",
        controller: function(){
        	var vm = this;
 					vm.pageContent = "About us content";
        },
    		controllerAs: 'vm'
      }
    }
  })
}

/* define controllers */
function HomeController() {
  var vm = this;
  vm.pageTitle = "Home page";
  vm.pageContent = "Home page content";
}

function AboutController() {
  var vm = this;
  vm.pageTitle = "About us";
  vm.pageContent = "About us content";
}