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. :)

score 0 · Accepted Answer · answered Jul 02 '16 at 17:32

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

I did everything like there but it loads only the first view and controller. When I want to access to e.g. home.games it loads only home but doesnt continue to games and I see only the first part. I'm routing them using AngularAMD still. You know anything for it? — yadbo, Jul 02 '16 at 20:54
@yadbo can you share the plunker for this issue so that I can look into — Prianca, Jul 04 '16 at 22:05
my comment has been removed kind how... But I was able to solve it. Thank you, it was a mistake by me. :) — yadbo, Jul 05 '16 at 12:06

Nested routing using AngularJS and RequireJS

1 Answers1