Trying to get my Resolve to inject into my controller to be able to inject into the HTML

Question

This is my index.js file

'use strict';

angular.module('wildenglish', ['ngAnimate', 'ngTouch', 'restangular', 'ngRoute',     'ui.bootstrap'])
  .config(function ($routeProvider, RestangularProvider) {

RestangularProvider.setBaseUrl('https://www.googleapis.com/calendar/v3/calendars/googleCalendarID');

$routeProvider
  .when('/', {
    templateUrl: 'app/main/main.html',
    controller: 'MainCtrl',
    resolve: {
            calendarEvents: function(Restangular){
                return Restangular.one('eventsAUTHKEY').get();
            }
        }
  })
  .otherwise({
    redirectTo: '/'
  });


 })

And my main controller.js

'use strict';

angular.module('wildenglish')

   .controller('MainCtrl', function(Restangular, calendarEvents) {
      var self = this,
      events = calendarEvents,
      items = events.items;




});

The Error I'm receiving when I try to use in the HTML is:

Error: [$injector:unpr] Unknown provider: calendarEventsProvider <- calendarEvents <- MainCtrl

So I am trying to figure out how I can utilize the information that I am getting back from that Promise which I can log in the console to be accessible to the HTML via the controller

Do I need a service or factory? and where would that go?

Thank you in advance for your help

Answer 1

Assign the events returned by the resolved promise to your controller scope. You'll need to change the depencies your injecting into your controller. You can leave out Restangular since you are resolving your promise in your route but you do need $scope:

angular.module('wildenglish').controller('MainCtrl', function($scope, calendarEvents) {

    // i'm assuming the following logs your events to your console
    // if not you're having a problem with your Restangular request
    console.log(calendarEvents);

    // Assign calendarEvents to your $scope
    $scope.events = calendarEvents;

});

Now you can use the events in your HTML template (assuming each event has a property called 'name'):

<ul>
    <li ng-repeat="event in events">{{event.name}}</li>
</ul>