Here's an example of how to use resolve with $routeProvider properly. First, I defined two factories like you have there, then in my config I set up a route that I want to inject data from my factories in to. I tell it what controller I want to use, the template is non-consequential in this context. Then under resolve I give it an object with two properties that are functions, someData and someMoreData. On those two functions I inject my data1 and data2 factories and $routeParams, get the data from the factories, and return the data.
In my controller definition I tell it I want to inject $scope and then I tell it I want to inject two other things, these are the resolve properties I defined in $routeProvider.
One thing to be mindful of, if you're doing actual API calls in your factories that you want data resolved from, the page will not load until the data is resolved, the controller won't even initiate until those are all done. So you might want to come up with some way to do a loading animation, there are lots of examples here on StackOverflow of how to do that.
angular.module('app.factories', [])
.factory('data1', ['$q', '$timeout', function($q, $timeout) {
return {
getData: function(id) {
var deferred = $q.defer();
var promise = deferred.promise;
$timeout(function() {
deferred.resolve('this is factory 1, id: ' + id);
}, 2000);
return promise;
}
};
}])
.factory('data2', ['$q', '$timeout', function($q, $timeout) {
return {
getData: function(id) {
var deferred = $q.defer();
var promise = deferred.promise;
$timeout(function() {
deferred.resolve('this is factory 2, id: ' + id);
}, 2000);
return promise;
}
};
}]);
angular.module('app', ['ngRoute', 'app.factories'])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/', {
controller: 'defaultCtrl',
template:'<a href="#/1">Go to route with parameter on it</a>'
})
.when('/:id', {
controller: 'testCtrl',
template: '<span ng-bind="string1"></span><br /><span ng-bind="string2"></span>',
resolve: {
someData: ['data1', '$route',
function(data1, $route) {
console.log('resolving someData');
return data1.getData($route.current.params.id).then(
function(response) {
return response;
});
}
],
someMoreData: ['data2', '$route',
function(data2, $route) {
console.log('resolving someMoreData');
return data2.getData($route.current.params.id).then(
function(response) {
return response;
});
}
]
}
});
}
])
.controller('defaultCtrl', function() { })
.controller('testCtrl', ['$scope', 'someData', 'someMoreData',
function($scope, someData, someMoreData) {
console.log('in route with id param');
$scope.string1 = someData;
$scope.string2 = someMoreData;
}
]);
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-route.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div ng-view>
</div>
</body>
</html>
Edit
Modified it so that your factories are in their own module and injected as a dependency to the app module, rather than being on the app module itself, which is IMHO leaning towards better architecture (most of the time I give each individual factory it's own module, but for brevity's sake I kept it simple)
resolveproperty on$routeProviderroutes to load the data from your services and then inject them into your controller?