5

我创建了一个简单的 Angular JS $routeProvider 解析测试应用程序。它给出了以下错误：

Error: Unknown provider: dataProvider <- data

如果有人能找出我哪里出错了，我将不胜感激。

索引.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>

解决测试.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>
4

3 回答 3

12

问题是您ng-controller="ResolveCtrl"在 index.html 中的 body 标记上同时在 $routeProvider 中为 rt.html 指定了相同的控制器。从你的 body 标签中取出控制器定义，让 $routeProvider 处理它。之后效果很好。

于 2013-05-31T03:09:52.833 回答
0

通过将数据添加到控制器的定义中，您可以告诉角度您希望在此处注入服务或工厂，但您没有数据服务或工厂，因此会出现错误。要使用数据变量，您可以从该$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-controller 都不需要控制器（如果您检查范围，这会将您的控制器嵌套在控制器中）。

如果您必须使用 resolve，您仍然需要一个工厂，因为 resolve 只会指向需要单独声明的正确工厂。

于 2013-05-31T03:10:09.637 回答
0

根据$routeprovider 的 angularjs 文档，解析对象是从键（依赖项名称）到工厂函数或现有服务名称的映射。试试这个：

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

$routeProvider.when("/",{
    templateUrl: "rt.html",
    controller: "ResolveCtrl",
    resolve: {
      data: myFactory
    }
});
于 2013-05-31T03:10:43.763 回答