FrAngular resolve 4

HTML

<div ng-app="app">
  <h2>Resolve</h2>
  <div ng-view></div>

  <!-- CACHE FILE: view1.html -->
  <script type="text/ng-template" id="view1.html">
      <h3>View 1 | <a href="#/view2">View 2</a></h3>
      View [1] : {{view}}
  </script>

  <!-- CACHE FILE: view2.html -->
  <script type="text/ng-template" id="view2.html">
      <h3><a href="#/">View 1</a> | View 2</h3>
      View [2] : {{view}}
  </script>

</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-resource.min.js"></script>
<style>

JavaScript

var app = angular.module('app', []);

app.config(function($routeProvider) {
    
  $routeProvider.
    when('/', {
        controller:'ViewCtrl', 
        templateUrl:'view1.html', 
        resolve: { viewName: function () {
            return setTimeout(() => "V1", 2000);
        }}
    }).
    when('/view2', {
        controller:'ViewCtrl', 
        templateUrl:'view2.html', 
        resolve: { viewName: function () {
            return "V2";
        }}
    }).
    otherwise({redirectTo:'/'});
    
});

app.controller('ViewCtrl', ['$scope', 'viewName', function ($scope, viewName) {
    $scope.view = viewName;
}]);