Test di risoluzione semplice angolare $ routeProvider. Cosa c'è di sbagliato con questo codice?

Ho creato una semplice soluzione per test di risoluzione di rotta JSP $ angolare. Si dà il seguente errore:

Error: Unknown provider: dataProvider <- data

sarei grato se qualcuno potesse identificare dove sono andato male.

index.html

<!DOCTYPE html> 
<html ng-app="ResolveTest"> 
    <head> 
    <title>Resolve Test</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"> </script> 
    <script src="ResolveTest.js"></script> 
    </head> 
    <body ng-controller="ResolveCtrl"> 
    <div ng-view></div> 
    </body> 
</html>

ResolveTest.js

var rt = angular.module("ResolveTest",[]); 

rt.config(["$routeProvider",function($routeProvider) 
{ 
    $routeProvider.when("/",{ 
    templateUrl: "rt.html", 
    controller: "ResolveCtrl", 
    resolve: { 
     data: ["$q","$timeout",function($q,$timeout) 
     { 
     var deferred = $q.defer(); 

     $timeout(function() 
     { 
      deferred.resolve("my data value"); 
     },2000); 

     return deferred.promise; 
     }] 
    } 
    }); 
}]); 

rt.controller("ResolveCtrl",["$scope","data",function($scope,data) 
{ 
    console.log("data : " + data); 
    $scope.data = data; 
}]);

rt.html

<span>{{data}}</span>

fonte

2013-05-31 Hilo

Il problema è che avete ng-controller="ResolveCtrl" sul tag body in index.html quando anche nel tuo $ routeProvider hai specificato lo stesso controller per rt.html. Prendi la definizione del controller dal tuo body tag e lascia che $ routeProvider si occupi di esso. Funziona benissimo dopo.

fonte

2013-05-31 03:09:52 John

Non sono d'accordo. Vedi http://jsfiddle.net/UbQHx/ – robbymurphy

Grazie jbw91, funziona come previsto ora. – Hilo

robbymurphy - non hai risoluzione né iniezione del risultato nel tuo violino in modo da non replicare correttamente il problema. – Hilo

Aggiungendo i dati alla definizione del controller, il vostro punto di vista è che ci si aspetta di iniettare un servizio o fabbrica qui, ma non si dispone di un servizio dati o fabbrica quindi l'errore. Per utilizzare la variabile dati hai tutto ciò che ti serve dalla linea $scope.data. Quindi per risolvere questo problema è necessario rimuovere l'iniezione di dati dalla chiamata del controller.

var rt = angular.module("ResolveTest",[]); 

rt.config(["$routeProvider",function($routeProvider) 
{ 
    $routeProvider.when("/",{ 
    templateUrl: "rt.html", 
    controller: "ResolveCtrl", 
    resolve: { 
     data: ["$q","$timeout",function($q,$timeout) 
     { 
     var deferred = $q.defer(); 

     $timeout(function() 
     { 
      deferred.resolve("my data value"); 
     },2000); 

     return deferred.promise; 
     }] 
    } 
    }); 
}]); 

rt.controller("ResolveCtrl",["$scope", function($scope) 
{ 
    $scope.data = ""; 
}]);

Se si vuole avere un fornitore di dati aggiungere un qualcosa di fabbrica come

rt.factory('data', ['$http', function($http){ 
return { 
    // Functions to get data here 
} 
}]);

Poi nella chiamata di controllo della funzione appropriata da questa fabbrica.

Inoltre, come gli altri hanno sottolineato, non è necessario il controller sia nel percorso che in un controller di rete (questo anniderà il controller nel controller se si ispezionano gli ambiti).

Se è necessario utilizzare la risoluzione, è ancora necessario uno stabilimento poiché la risoluzione punta solo alla fabbrica corretta che deve essere dichiarata separatamente.

fonte

2013-05-31 03:10:09

Se la risoluzione è una funzione che restituisce una promessa, viene risolta e quindi inserita nel controller. – Hilo

In base allo angularjs documentation for $routeprovider l'oggetto di risoluzione è una mappa dalla chiave (nome della dipendenza) alla funzione di fabbrica o il nome di un servizio esistente. Prova questo invece:

var myFactory = function($q, $timeout) { ... }; 
myFactory.$inject = ['$q', '$timeout']; 

$routeProvider.when("/",{ 
    templateUrl: "rt.html", 
    controller: "ResolveCtrl", 
    resolve: { 
     data: myFactory 
    } 
});

fonte

2013-05-31 03:10:43 robbymurphy

Dal documento angularJS $ routeProvider per la risoluzione: factory - {string | function}: se stringa, si tratta di un alias per un servizio. Altrimenti, se funzione, viene iniettata e il valore di ritorno viene considerato come dipendenza. Se il risultato è una promessa, viene risolto prima che il suo valore venga iniettato nel controller. – Hilo

Test di risoluzione semplice angolare $ routeProvider. Cosa c'è di sbagliato con questo codice?

risposta

Problemi correlati