Question

我创建了一个简单的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>

Answer 1

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

Answer 2

通过将数据添加到控制器的定义中，您希望在此处注入服务或工厂，但是您没有数据服务或工厂，因此错误。要使用数据变量，您可以从$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
 }
}]);

然后在您的控制器中调用此工厂的相应功能。

同样正如其他人指出的那样，你的路线和控制器都不需要控制器（如果检查范围，这将把你的控制器嵌套在你的控制器中）。

如果您必须使用解决方案，您仍需要工厂，因为解决方案只会指向需要单独声明的正确工厂。

Answer 3

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

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

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

简单的Angular $ routeProvider解析测试。这段代码有什么问题？

3 个答案: