Einfacher Angular $ routeProvider-Auflösungstest. Was ist falsch an diesem Code?

Ich habe eine einfache Angular JS $ routeProvider Auflösung Testanwendung erstellt. Es gibt folgenden Fehler:

Error: Unknown provider: dataProvider <- data

Ich würde es schätzen, wenn jemand identifizieren könnte, wo ich falsch gegangen bin.

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>

Quelle

2013-05-31 Hilo

Das Problem ist, dass Sie ng-controller="ResolveCtrl" auf Ihren Körper-Tag in index.html haben, wenn Auch in Ihrem $ routeProvider geben Sie denselben Controller für rt.html an. Nehmen Sie die Controller-Definition aus Ihrem body-Tag heraus und lassen Sie den $ routeProvider sich darum kümmern. Es funktioniert danach großartig.

Quelle

2013-05-31 03:09:52 John

Ich stimme nicht zu. Siehe http://jsfiddle.net/UbQHx/ – robbymurphy

Danke jbw91, funktioniert wie erwartet jetzt. – Hilo

robbymurphy - Sie haben keine Lösung noch Injektion des Ergebnisses in Ihrer Geige, so dass Sie das Problem nicht korrekt replizieren. – Hilo

Durch Hinzufügen von Daten zu der Definition des Controllers Ihre sagen Winkel, dass Sie erwarten, hier einen Service oder Fabrik zu injizieren, aber Sie haben keinen Datendienst oder Fabrik so den Fehler. Um die Datenvariable zu verwenden, benötigen Sie alle benötigten Daten aus der Zeile $scope.data. Um dies zu beheben, müssen Sie die Dateneingabe von Ihrem Controller-Aufruf entfernen.

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 = ""; 
}]);

Wenn Sie einen Datenprovider haben wollen eine Fabrik so etwas wie

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

Dann in Ihrem Controller Aufruf die entsprechende Funktion aus dieser Fabrik hinzufügen.

Auch wie die anderen darauf hingewiesen haben, brauchen Sie den Controller nicht sowohl auf Ihrer Route als auch in einem ng-Controller (dadurch wird Ihr Controller in Ihren Controller verschachtelt, wenn Sie die Bereiche untersuchen).

Wenn Sie auflösen müssen, benötigen Sie noch eine Fabrik, da die Auflösung nur auf die richtige Fabrik verweist, die separat deklariert werden muss.

Quelle

2013-05-31 03:10:09

Wenn Auflösung eine Funktion ist, die eine Zusage zurückgibt, wird sie aufgelöst und dann in den Controller injiziert. – Hilo

Gemäß der ist das Auflösungsobjekt eine Zuordnung von Schlüssel (Abhängigkeitsname) zu Factory-Funktion oder Name eines vorhandenen Service. Versuchen Sie dies stattdessen:

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

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

Quelle

2013-05-31 03:10:43 robbymurphy

Vom AngularJS $ routeProvider doc für resolve: factory - {string | function}: Wenn string, dann ist es ein Alias für einen Service. Ansonsten wenn Funktion, dann wird es injiziert und der Rückgabewert wird als Abhängigkeit behandelt. Wenn das Ergebnis ein Versprechen ist, wird es aufgelöst, bevor sein Wert in den Controller eingegeben wird. – Hilo

Einfacher Angular $ routeProvider-Auflösungstest. Was ist falsch an diesem Code?

Antwort

Verwandte Themen