unidades:07_rutas:04_resolve

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
  <script src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.min.js'></script>
  <script src="//code.angularjs.org/1.2.19/i18n/angular-locale_es-es.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <h1>Esto es el titulo y no cambia</h1>
  <ul>
    <li><a href="#/pagina1/2/3/7/9">Ir a la p&aacute;gina 1.</a>.Aqui se tardar&aacute; en mostrar la p&aacute;gina pero ya estar&aacute;n los datos calculados.</li>
    <li><a href="#/pagina2/2/3/7/9">Ir a la p&aacute;gina 2</a>.La p&aacute;gina se cargar&aacute; inmediatamente pero se tardar&aacute; en calcular los datos</li>
  </ul>
  <div ng-view></div>

  <h3>Esto es un pie y no cambia</h3>

</body>

</html>

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

app.factory("sumaAsincrona",['$q','$timeout',function($q,$timeout) {
  
  return function (a,b) {
     var defered=$q.defer();
     var promise=defered.promise;
      
     $timeout(function() {
        try{
           var resultado=a+b;
           defered.resolve(resultado);
        } catch (e) {
           defered.reject(e);
        }   
     },3000); 
      
     return promise;
  } 
  
}]);


app.config(['$routeProvider',function($routeProvider) {

  $routeProvider.when('/pagina1/:a/:b/:c/:d', {
    templateUrl: "pagina1.html",
    controller: "Pagina1Controller",
    resolve: {
      suma2y3:['sumaAsincrona','$route',function(sumaAsincrona,$route) {
        var a=parseInt($route.current.params.a);
        var b=parseInt($route.current.params.b);
        return sumaAsincrona(a,b);
      }],
      suma7y9:['sumaAsincrona','$route',function(sumaAsincrona,$route) {
        var c=parseInt($route.current.params.c);
        var d=parseInt($route.current.params.d);
        return sumaAsincrona(c,d);
      }]
    }
  });
    
  $routeProvider.when('/pagina2/:a/:b/:c/:d', {
    templateUrl: "pagina2.html",
    controller: "Pagina2Controller"
  });
    
  
  
  
  $routeProvider.otherwise({
        redirectTo: '/pagina1/nada'
  });   

}]);


app.controller("Pagina1Controller", ["$scope","suma2y3","suma7y9",function($scope,suma2y3,suma7y9) {
   $scope.mensaje2y3="suma de 2 y 3 es " + suma2y3;
   $scope.mensaje7y9="suma de 7 y 9 es " + suma7y9;
}]);




app.controller("Pagina2Controller", ["$scope","$routeParams","sumaAsincrona",function($scope,$routeParams,sumaAsincrona) {
  var a=parseInt($routeParams.a);
  var b=parseInt($routeParams.b);
  var c=parseInt($routeParams.c);
  var d=parseInt($routeParams.d);
        
  sumaAsincrona(a,b).then(function(resultado){
        $scope.mensaje2y3="suma de 2 y 3 es " + resultado;
  });
  
  sumaAsincrona(c,d).then(function(resultado){
     $scope.mensaje7y9="suma de 7 y 9 es " + resultado;
  });
  
}]);

Ejemplo de resolve en rutas

<h1>Soy la pagina 1</h1> 
Al mostrar la pagina ya se ven los datos:
<br>
{{mensaje2y3}}
<br>
{{mensaje7y9}}

<h1>Soy la pagina 2</h1>
Estamos esperando a que se muestren los datos
<br>
.....
<br>
......
<br>
{{mensaje2y3}}
<br>
{{mensaje7y9}}