angularjs $ routeProvider Route wird ausgeführt, bevor die Auflösung abgeschlossen wird

Question

Ich möchte, dass die route.resolve-Methode (n) ausgelöst wird, bevor der tatsächliche Routencode ausgeführt wird. Leider wird im folgenden Code prime() aufgerufen, aber asynchron aufgerufen und der Routencode wird aufgerufen, bevor der Prim abgeschlossen ist. Ich dachte, die Lösungsmethoden einer Route sollten abgeschlossen sein, bevor die Route geladen wurde.

(function() { 
'use strict'; 

var app = angular.module('app'); 

// Collect the routes 
app.constant('routes', getRoutes()); 

// Configure the routes and route resolvers 
app.config(['$routeProvider', 'routes', routeConfigurator]); 
function routeConfigurator($routeProvider, routes) { 

    routes.forEach(function (r) { 
     setRoute(r.url, r.config) 

    }); 

    $routeProvider.otherwise({ redirectTo: '/' }); 

    function setRoute(url, definition) { 
     //set resolvers for all of the routes 
     //by extending any existing resolvers (or creating a new one) 
     definition.resolve = angular.extend(definition.resolve || {}, { 
      prime: prime 
     }); 


     $routeProvider.when(url, definition); 
     return $routeProvider; 
    } 


} 

prime.$inject = ['datacontext']; 

function prime(dc) { 
    dc.prime(); 
} 


// Define the routes 
function getRoutes() { 
    return [ 
     { 
      url: '/', 
      config: { 
       templateUrl: 'app/dashboard/dashboard.html', 
       title: 'dashboard', 
       settings: { 
        nav: 1, 
        content: '<i class="icon-dashboard"></i> Dashboard' 
       } 
      } 
     }, 
     { 
      url: '/sessions', 
      config: { 
       title: 'admin', 
       templateUrl: 'app/sessions/sessions.html', 
       settings: { 
        nav: 2, 
        content: '<i class="icon-calendar"></i> Sessions' 
       } 
      } 
     }, 
     { 
      url: '/speakers', 
      config: { 
       title: 'speakers', 
       templateUrl: 'app/speakers/speakers.html', 
       settings: { 
        nav: 3, 
        content: '<i class="icon-user"></i> Speakers' 
       } 
      } 
     }, 
     { 
      url: '/attendees', 
      config: { 
       title: 'attendees', 
       templateUrl: 'app/attendees/attendees.html', 
       settings: { 
        nav: 4, 
        content: '<i class="icon-group"></i> Attendees' 
       } 
      } 
     } 
    ]; 
} 
})(); 

Answer 1

Ich schlage vor, Sie neu zu positionieren die Hauptfunktion für die globale Steuerung als definieren:

$scope.prime = function (dc) { 
    dc.prime(); 
}; 

Answer 2

Versuchen Sie, prime auf die folgenden:

function prime(dc) { 
    return dc.prime(); 
} 

Answer 3

verschieben prime inside routeConfigurator

(function() { 
     'use strict'; 

    var app = angular.module('app'); 

    // Collect the routes 
    app.constant('routes', getRoutes()); 

    // Configure the routes and route resolvers 
    app.config(['$routeProvider', 'routes', routeConfigurator]); 

    function routeConfigurator($routeProvider, routes) { 
     routes.forEach(function (r) { 
      setRoute(r.url, r.config); 
     }); 
     $routeProvider.otherwise({ redirectTo: '/' }); 
     function setRoute(url, definition) { 
      definition.resolve = angular.extend(definition.resolve || {}, { prime: prime }); 
      $routeProvider.when(url, definition); 
      return $routeProvider; 
     } 
     prime.$inject = ['datacontext']; 
     function prime(datacontext) { 
      return datacontext.prime(); 
     } 
    } 


    // Define the routes 
    function getRoutes() { 
     return [ 
      { 
       url: '/', 
       config: { 
        templateUrl: 'app/dashboard/dashboard.html', 
        title: 'dashboard', 
        settings: { 
         nav: 1, 
         content: '<i class="fa fa-dashboard"></i> Dashboard' 
        } 
       } 
      }, 
      { 
       url: '/sessions', 
       config: { 
        title: 'sessions', 
        templateUrl: 'app/sessions/sessions.html', 
        settings: { 
         nav: 2, 
         content: '<i class="fa fa-calendar"></i> Sessions' 
        } 
       } 
      }, 
      { 
       url: '/speakers', 
       config: { 
        title: 'speakers', 
        templateUrl: 'app/speakers/speakers.html', 
        settings: { 
         nav: 3, 
         content: '<i class="fa fa-user"></i> Speakers' 
        } 
       } 
      }, 
      { 
       url: '/attendees', 
       config: { 
        title: 'attendees', 
        templateUrl: 'app/attendees/attendees.html', 
        settings: { 
         nav: 4, 
         content: '<i class="fa fa-group"></i> Attendees' 
        } 
       } 
      } 
     ]; 
    } 
})();