Angular Grid in an Angular widget returns Error: [$injector:unpr] Unknown provider:

Question

In the following code I have created an angular widget which uses an angular grid to pass data. However, I am getting the following error Error: [$injector:unpr] Unknown provider: alphadataProvider <- alphadata

The widget code:

'use strict';

angular.module('alphabeta.table.widgets', ['adf.provider', 'btford.markdown', 'ngGrid'])
  .value('githubApiUrl', 'https://api.github.com/repos/')
  .config(function(dashboardProvider){
dashboardProvider
  .widget('reservationTotals', {
    title: 'Reservation Totals',
    description: 'Reservation Totals widget',
    controller: 'reservationTotalsCtrl',
    templateUrl: 'scripts/widgets/alphabeta/alphabeta.html',
    resolve: {
        alphadata: function(alphatradingService){
            return alphatradingService.get();
        }
    },
    edit: {
      templateUrl: 'scripts/widgets/alphabeta/edit.html',
      reload: false
    }
  });
 })

The service

 .service('alphatradingService', function($q, $http, githubApiUrl){
return {
  get: function(){
    var deferred = $q.defer();
    $http.get('9_Response.json')
      .success(function(data){
        deferred.resolve(data);
      })
      .error(function(){
        deferred.reject();
      });
    return deferred.promise;
  }
};
})

The controller

.controller('reservationTotalsCtrl', function($scope, alphadata){

var tabledata = [];

var i, n;
var ycount=0, yexist=0;
var numf;
for(i=0;i<alphadata.length;i++){
    yexist=0;
    for(n=0;n<ycount;n++){
        if (alphadata[i].stYear == tabledata[n].Year && alphadata[i].market == tabledata[n].Market) {
            tabledata[n].Sales += alphadata[i].totSale;
            tabledata[n].Sales = parseFloat(Math.round(tabledata[n].Sales * 100) / 100);
            yexist++;
            break;
        } 
    }
    if (!yexist) {
        numf = alphadata[i].totSale;
        tabledata.push({
                Market: alphadata[i].market,
                Year: alphadata[i].stYear,
                Sales: parseFloat(Math.round(numf * 100) / 100),
                CustomerName: alphadata[i].custName
        });
        ycount++;   
    }           
}

$scope.data = tabledata;

$scope.gridOptions = {
    data: 'data',
    enablePinning: true,
    columnDefs: [{ field: "Market", width: 60, pinned: true },
                { field: "Year", width: 60 },
                { field: "Sales", width: 60 },
                { field: "CustomerName", width: 60 }]
};

console.log($scope.data);

});

The alphabeta.html code:

<div> <div ng-controller="reservationTotalsCtrl"> <div class="gridStyle" ng-grid="gridOptions"></div> </div> </div>

Can you please help me?

Answer 1

Try defining your resolve like this:

resolve: {
    'alphadata': ['alphatradingService', function(alphatradingService){
        return alphatradingService.get();
    }]
}

Answer 2

I am sorry as I am seeing your question very late after it was asked. But my answer might help others who are stuck on similar problem. See get to the basic of the error which says,

Error: [$injector:unpr] Unknown provider:

Which means you have not resolved the dependency correctly for your injector which seems to be a service in your case as mentioned in angularjs document.

You could have tried:

resolve: {
    alphadata: function(alphatradingService){
        return alphatradingService.get;
    }

In your service

$scope.get = get (get is your function defined in services)