Search code examples
javascriptangularjsurl-routing

AngularJS route not resolved on page load


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 ?


Solution

  • 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();