I have encountered an issue with nested routings that I am struggling to resolve.
The technologies I am using include: AngularJS, RequireJS; AngularAMD, Angular Route.
To start off, here is my main routing setup:
app.config(function($routeProvider, $locationProvider, $translateProvider) {
$routeProvider
.when("/",
angularAMD.route({
templateUrl : "app/src/home/HomeController.html",
controller : "HomeController",
controllerUrl : "app/src/home/HomeController.js"
})
)
.when("/overview",
angularAMD.route({
templateUrl : "app/src/home/HomeController.html",
controller : "HomeController",
controllerUrl : "app/src/home/HomeController.js"
})
);
});
In the above configuration, I am directing paths '/' and '/overview/' to 'app/src/home/HomeController.html'.
Within HomeController.html, I load sub controllers and views using the following code snippet:
...
<div ng-include="'app/src/home/'+currentLocation+'/index.html'">
</div>
...
where currentLocation represents the current path '/ or '/overview/'. Additionally, in my controller:
define([
"app",
"src/home/overview/index",
],
...
As a result, I need to include my controllers as dependencies before loading the view. Is there a more efficient way to handle these routes in Angular and RequireJS?
Thank you for any guidance provided. :)