Having successfully implemented code for dynamically loading routes and controllers in AngularJS 1.2, I now face issues after upgrading to AngularJS 1.6 as the dynamics no longer function.
The previous code was used to load JS files and recalculate the route:
moduleApp.config(function ($routeProvider, $controllerProvider) {
moduleApp.controllerProvider = $controllerProvider.register;
moduleApp.routeProvider = $routeProvider;
$routeProvider.when('/', {
templateUrl: 'startpage.html',
controller: 'startpageController'
})
.otherwise({
resolve: {
deps: function($q, $rootScope, $location) {
var deferred = $q.defer();
var modulename = $location.path().split("/")[1];
if (modulename !== null) {
// Using https://github.com/ded/script.js to load JS files
$script(modulename + ".js", function() {
$rootScope.$apply(function() {
$rootScope.$broadcast('$locationChangeSuccess', $location.path(), $location.path());
});
});
}
return deferred.promise;
}
}
});
});
This is how the loaded JS file appears:
moduleApp.routeProvider.
when('/FirstModule', {
templateUrl: 'FirstModule.html',
caseInsensitiveMatch: true
});
moduleApp.controllerProvider('firstModuleController', function ($scope) {
});
In AngularJS 1.2, this method functions perfectly fine. However, it seems that applying the route in 1.6 differs. What modifications should be made within the function utilizing $rootScope to make it work again? Are there any other adjustments required?
A demonstration of this situation is available on Plunker.
To observe functionality in AngularJS version 1.2.16, change to the respective setting in index.html and adjust hashbangs in links from #! to #. Switching back to version 1.6 reveals the issue with the current setup.