Login/Register
Simple Angular $routeProvider resolve test. What is wrong with this code?
Asked Answered
Solved angularjsangularjs-directiveangularjs-serviceangularjs-routingangularjs-controller
O

3

5

I have created a simple Angular JS $routeProvider resolve test application. It gives the following error:

Error: Unknown provider: dataProvider <- data

I would appreciate it if someone could identify where I have gone wrong.

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>
O answered 31/5, 2013 at 2:52 Comment(0)
C
12

The problem is that you have ng-controller="ResolveCtrl" on your body tag in index.html when also in your $routeProvider you specify the same controller for rt.html. Take out the controller definition from your body tag and just let the $routeProvider take care of it. It works great after that.

Carolanncarole answered 31/5, 2013 at 3:9 Comment(2)
robbymurphy - you have no resolve nor injection of the result in your fiddle so you're not replicating the issue correctly. – O
@CM you're right, I was under the impression that you were arguing that you cannot have a controller specified in both the route and the markup. – Gingivitis
M
0

By adding data to the definition of the controller your telling angular that you expect to inject a service or factory here yet you don't have a data service or factory thus the error. To use the data variable you have all you need from the $scope.data line. So to fix this you need to remove the data injection from your controller call.

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

If you want to have a data provider add a factory something like 

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

Then in your controller call the appropriate function from this factory.

Also as the others have pointed out you don't need the controller both in your route and in an ng-controller (this will nest your controller in your controller if you inspect the scopes).

If you must use resolve you still need a factory as resolve will just point to the proper factory which needs to be declared separately.

Marthmartha answered 31/5, 2013 at 3:10 Comment(1)
If resolve is a function that returns a promise, it is resolved then injected into the controller. – O
G
0

According to the angularjs documentation for $routeprovider the resolve object is a map from key (dependency name) to factory function or name of an existing service. Try this instead:

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

$routeProvider.when("/",{
    templateUrl: "rt.html",
    controller: "ResolveCtrl",
    resolve: {
      data: myFactory
    }
});
Gingivitis answered 31/5, 2013 at 3:10 Comment(1)
From the AngularJS $routeProvider doc for resolve: factory - {string|function}: If string then it is an alias for a service. Otherwise if function, then it is injected and the return value is treated as the dependency. If the result is a promise, it is resolved before its value is injected into the controller. – O

© 2022 - 2024 — McMap. All rights reserved.