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