Nested routing using AngularJS and RequireJS

Question

I have following problem with nested routings... I'm not able to do it.

Used technologies: AngularJS, RequireJS; AngularAMD, Angular Route.

So... first of all I want to show my main routing:

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"
                })
            );
});

As you can see I'm redirecting the pathes ' / ' and ' /overview/ ' to ' app/src/home/HomeController.html '.

In HomeController.html I'm loading sub controller and views like this:

...
<div ng-include="'app/src/home/'+currentLocation+'/index.html'">
            </div>
...

while currentLocation is the path itself. So / and /overview/ in this case. And in my controller:

define([
    "app",
    "src/home/overview/index",
],
...

So I'm forced to include my controllers as dependencies before loading the view. So I wanted to know if there's a proper way doing these routes in Angular and RequireJS?

Thanks in advance. :)

Answer 1

for your problem you need to use nested state. using ng-include based on lactation path is definitely not a good solution. One more suggestion, Please use $stateProvide , It has better features than routeProvider. You can read out their comparison.

For your problem solution could be like this: https://scotch.io/tutorials/angularjs-multi-step-form-using-ui-router

 // app.js // create our angular app and inject ngAnimate and ui-router // ============================================================================= angular.module('formApp', ['ngAnimate', 'ui.router']) // configuring our routes // ============================================================================= .config(function($stateProvider, $urlRouterProvider) { $stateProvider // route to show our basic form (/form) .state('form', { url: '/form', templateUrl: 'form.html', controller: 'formController' }) // nested states // each of these sections will have their own view // url will be nested (/form/profile) .state('form.profile', { url: '/profile', templateUrl: 'form-profile.html' }) // url will be /form/interests .state('form.interests', { url: '/interests', templateUrl: 'form-interests.html' }) // url will be /form/payment .state('form.payment', { url: '/payment', templateUrl: 'form-payment.html' }); // catch all route // send users to the form page $urlRouterProvider.otherwise('/form/profile'); })