angular sub module route

问题:

I have a:

• main module : kp
• sub module : kp.venue

I want kp.venue to have it's own "route" definitions (for all paths relative to that module). This is what I am trying to achieve in the code bellow. Can anyone explain me why it doesn't work?

I followed the technique presented in this post: https://stackoverflow.com/a/15301427/971008

(function () {
'use strict';
    angular.module('kp.venue', [])

    .config(['$routeProvider',
        function($routeProvider) {
            $routeProvider
            .when("/venue", {
                template : "<p>This is the venue module</p>",
                controller: "VenueCtrl"
            });
        }
    ])

    .controller('VenueCtrl', ['$scope',
        function($scope){
            console.log("VenueController");
        }
    ]);

    angular.module('kp', ['ngRoute', 'ngAnimate', 'kp.venue'])

    .config(['$locationProvider', '$routeProvider',
        function($locationProvider, $routeProvider) {
        $locationProvider.html5Mode({enabled:true, requireBase:false});
        $routeProvider
            .when("/", {
                template: "<p>main app</p>",
                controller: "MainController"
            })
            .otherwise({
                redirectTo: '/'
            });
        }
    ]);

    //Load controller
    angular.module('kp')

    .controller('MainController', ['$scope',
        function($scope) {
            $scope.test = "Testing...";
        }
    ]);
}());

Note that I have already tried to move "kp.venue" bellow the definition of "kp" module to be sure that it was not a problem related to things not being loaded in the right order.