I am currently facing an issue in my Angular app where the first page call does not load the correct route template, only displaying the menu bar. However, if I navigate to another link and then go back to the original, the correct page loads. Can anyone help me debug this problem or suggest any known issues related to initial page loads?
Some context: I am using Angularjs (v1.2.0-rc.2) and requirejs among other dependencies. Unfortunately, I cannot provide a simplified example at the moment as I am unsure of the elements that can be removed without affecting functionality. Initially, this problem did not occur for certain pages, but after further development on other parts of the app, they now exhibit the same behavior. Any pointers would be greatly appreciated...
Update
As requested, here is an example of the route configuration. They all follow a similar structure with some static components and dynamic IDs.
mod.config(function ($routeProvider) {
$routeProvider.when('/some/:id/route/to/somewhere', {
controller: 'MyController',
templateUrl: '/template/some.template.html'
});
});
Update 2
After investigating the Angular code, I discovered that during the initial handling of a new URL, no handler was registered for the event '$locationChangeSuccess'. This snippet from 'angular.js' highlights the issue:
// update browser
var changeCounter = 0;
$rootScope.$watch(function $locationWatch() {
var oldUrl = $browser.url();
var currentReplace = $location.$$replace;
if (!changeCounter || oldUrl != $location.absUrl()) {
changeCounter++;
$rootScope.$evalAsync(function() {
if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).
defaultPrevented) {
$location.$$parse(oldUrl);
} else {
$browser.url($location.absUrl(), currentReplace);
afterLocationChange(oldUrl);
}
});
}
$location.$$replace = false;
return changeCounter;
});
return $location;
function afterLocationChange(oldUrl) {
$rootScope.$broadcast('$locationChangeSuccess', $location.absUrl(), oldUrl);
}
Only after the processing of the first page load occurs, in 'angular-route.js', is the line executed: '$rootScope.$on('$locationChangeSuccess', updateRoute);' which I believe is essential for routing to function correctly and display views. Subsequent URL changes work fine. Perhaps the issue lies in how I initialize Angular. Currently, I use:
angular.element(document).ready(function() {
angular.bootstrap(document, ['some', 'more', 'modules', 'ngRoute']);
});
I also tried updating to v1.2.5 without any effect on the problem.