I try to implement a AngularJS router into my application.
So I have define one route (in angular.module('MyModule').config()
) :
$routeProvider
.when('/:stepId?', {
templateUrl: EditorApp.webDir + 'bundles/innovapath/angularjs/Step/Partial/step-form.html',
controller: 'StepFormCtrl',
controllerAs: 'stepFormCtrl',
resolve: {
step: [
'$route',
'PathService',
function($route, PathService) {
var step = null;
// Retrieve the step from route ID
if ($route.current.params && $route.current.params.stepId) {
step = PathService.getStep($route.current.params.stepId);
}
return step;
}
],
inheritedResources: [
'$route',
'PathService',
function($route, PathService) {
var inherited = [];
var step = PathService.getStep($route.current.params.stepId);
if (angular.isDefined(step) && angular.isObject(step)) {
var path = PathService.getPath();
// Grab inherited resources
inherited = PathService.getStepInheritedResources(path.steps, step);
}
return inherited;
}
]
}
})
.otherwise({
redirectTo: '/:stepId?'
});
I'm also listening $routeChangeStart
event, but it's not fired when my page is loaded.
I can't figure out why the route is not resolved. Moreover, when I refresh the page with F5
, I got the same problem.
When I use internal link in my application the route resolution works perfectly.
Any idea ?
OK, found it.
Before the directive ng-view
is processed I have lots of other parents directives which needs to be initialized, so it defer calculation of the route, which miss the $locationChange
event.
Solution is to force route calculation with :
$route.reload();