using resolve with components ng

resolve.js

angular.module('app', ['ui.router'])
.config(function($stateProvider){
  $stateProvider
    .state('app', {
      url: '/app',
      resolve: {
        // DataService must be a valid dependecny somewhere
        // user any valid service
        // data will be the name of the resolved value
        data: function(DataService /*, $http, $log,  */){
          // promise returning function
          return DataService.getData();
        }
      },
      // inject data
      controller: function(data, $scope){
        // bind to scope or this
        // if this, use controllerAs
        $scope.data = data.
      },
      
      template: '<my-component the-data="data"></my-component>'
    });
})
.directive('myComponent', function(){
  return {
    scope: {
      'theData': '='
    }
    // ... the rest 
  }
})