Route resolve promise in AngularJS - angularjs

Question

Using a route resolve allows the promise to resolve before the controller logic executes, so I want to resolve my promise in the ui-router configuration. I have 3 files: app.js, main.controller.js and products.service.js
app.js
angular.module('app',[
'Products',
'ui.router'
])
.config(config);
config.$inject = ['$stateProvider','$urlRouterProvider'];
function config($stateProvider,$urlRouterProvider){
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/products");
// Now set up the states
$stateProvider
.state('productsState', {
url: "/products",
templateUrl: "views/products.html",
controller: "MainController as Main",
resolve: MainController.resolve
});
}
main.controller.js
angular.module('app')
.controller('MainController', MainController);
MainController.resolve = {
_products: ['ProductsService', function (ProductsService) {
return ProductsService.getProducts();
}]
};
MainController.$inject = ['_products'];
function MainController(_products){
var vm = this;
vm.test = 'Angular 1.4.8';
vm.products = _products;
}
products.service.js
angular.module('Products',[])
.factory('ProductsService', ProductsService);
ProductsService.$inject = ['$http'];
function ProductsService($http){
return {
getProducts:getProducts
};
function getProducts(){
return $http.get('some-url').then(function(response){
return response.data;
});
}
}
Unknown provider: _productsProvider <- _products <- MainController