単純な角度$ routeProviderの解決テスト。このコードで何が問題になっていますか？

私は簡単なAngular JS $ routeProviderテストアプリケーションを作成しました。私が間違った場所に誰かを特定することができれば、私はそれを感謝

Error: Unknown provider: dataProvider <- data

：それは、次のエラーが発生します。

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>

出典

2013-05-31 Hilo

問題は、あなたがindex.htmlをするときのあなたの体のタグに ng-controller="ResolveCtrl"を持っているということです

あなたの$ routeProviderでrt.htmlに同じコントローラを指定することもできます。 bodyタグからコントローラの定義を取り出し、$ routeProviderで処理させてください。それはそれの後で素晴らしい動作します。あなたはまだあなたがデータサービスや工場ので、エラーを持っていないここにサービスや工場を注入するために期待しているあなたは、角伝えるコントローラの定義にデータを追加することにより

出典

2013-05-31 03:09:52 John

私は同意しません。 http://jsfiddle.net/UbQHx/ – robbymurphy

jbw91が期待どおりに動作するようになりました。 – Hilo

robbymurphy - あなたはあなたのフィドルに結果の解決も注入もないので、問題を正しく複製していません。 – Hilo

。 $scope.data行から必要なデータ変数を使用するには、したがって、これを修正するには、コントローラ呼び出しからデータインジェクションを削除する必要があります。

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

あなたがデータプロバイダを持つようにしたい場合は、その後、あなたのコントローラで、この工場から適切な関数を呼び出す

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

のような工場の何かを追加します。他の人が指摘したように（あなたはスコープを検査した場合、あなたのコントローラでは、この意志の巣あなたのコントローラを）

はまた、あなたはあなたのルートでNGとコントローラの両方のコントローラを必要としません。

あなたは解決としてあなたはまだ工場を必要とする決意を使用しなければならない場合は、単に個別に宣言する必要があり、適切な工場を指します。

出典

2013-05-31 03:10:09

解決策が約束を返す関数である場合、解決されてコントローラに注入されます。 – Hilo

angularjs documentation for $routeproviderによると決意オブジェクトは、既存のサービスのファクトリ関数または名前の鍵（依存名）からのマップです。代わりにこれを試してみてください：

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

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

出典

2013-05-31 03:10:43 robbymurphy

解決のためのAngularJS $ routeProvider docから：factory - {string | function}：stringの場合、それはサービスのエイリアスです。そうでなければ、関数の場合、それは注入され、戻り値は依存として扱われます。結果が約束の場合、その値がコントローラに注入される前に解決されます。 – Hilo

単純な角度$ routeProviderの解決テスト。このコードで何が問題になっていますか？

答えて

関連する問題