FrAngular resolve 1

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.factory('WaitInit', ['$timeout', function ($timeout) {
    return $timeout(function () {}, 3000);
}]);

app.factory('WaitInit2', ['$timeout', function ($timeout) {
    return $timeout(function () {}, 3000);
}]);

app.config(function($routeProvider) {
    
  $routeProvider.
    when('/', {
        controller:'View1Ctrl', 
        templateUrl:'view1.html', 
        resolve: { wait: 'WaitInit'}
    }).
    when('/view2', {
        controller:'View2Ctrl', 
        templateUrl:'view2.html', 
        resolve: { wait1: 'WaitInit2'}
    }).
    otherwise({redirectTo:'/'});
    
});

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

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