AngularJS : basic routing with $routeProvider and route resolvement. Illustrated with delay on route resolve.

AngularJS : basic routing with $routeProvider and route resolvement. Illustrated with delay on route resolve.

by Daan De Smedt

HTML

<script src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
<!--
  AngularJS
  ----------
  basic routing with $routeProvider and route resolvement. Illustrated with delay on route resolve. 
-->

<div ng-app="app">

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

  <!-- navigation -->
  <div>
    <a href="#/home">Home (resolve delay 1 SEC)</a><br/>
    <a href="#/about">About (resolve delay 3 SEC)</a>
  </div>
  <!-- ng-view container -->
  <div ng-view></div>

</div>

JavaScript

angular
  .module('app', ['ngRoute'])
  .controller('HomeController', HomeController)
  .controller('AboutController', AboutController)
  .factory('delayedPromiseService', DelayedPromiseService)
  .config(RouteConfig)

/* define routes with controller & controllerAs syntax */
function RouteConfig($routeProvider) {
  $routeProvider
    .when('/home', {
      templateUrl: 'views/page.html',
      controller: 'HomeController',
      controllerAs: 'vm',
      resolve: {
        timeout: function(delayedPromiseService){
           return delayedPromiseService.resolveWithDelay(1000);
      	}
      }
    })
    .when('/about', {
      templateUrl: 'views/page.html',
      controller: 'AboutController',
      controllerAs: 'vm',
      resolve: {
        timeout: function(delayedPromiseService){
           return delayedPromiseService.resolveWithDelay(3000);
      	}
      }
    })
    .otherwise('/home');
}

/* define controllers */
function HomeController() {
  /* declare VM */
  var vm = this;
  vm.pageTitle = "Home page";
  vm.pageContent = "Sed laoreet egestas enim vitae porttitor. Donec at nibh vel augue varius interdum et eget lorem. Nulla augue mauris, egestas pulvinar viverra eu, pellentesque nec leo. Integer luctus sem ac tincidunt elementum. Vivamus vitae euismod massa, ut luctus nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ornare felis ut tortor aliquam, eget sollicitudin lacus rhoncus. Curabitur laoreet lacus nec leo posuere, sit amet rutrum lorem hendrerit. Curabitur magna orci, condimentum a enim sit amet, interdum ultrices diam. Aenean consequat tempor erat. Nunc a egestas enim. In ut ullamcorper sem, a sodales mauris. Aenean nec risus libero. Sed ac libero a ante consequat iaculis eu nec ex.";
}

function AboutController() {
  /* declare VM */
  var vm = this;
  vm.pageTitle = "About us";
  vm.pageContent = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec luctus nisi. Fusce in...