AngularJS - How to refer to a submodule controller from ui-router?

Question

I'm struggling a bit with having submodules in an Angular 1.3.9 app. I've got a (non-working, sorry) preview at http://plnkr.co/edit/XBfTPAGRRe0CWJgjGJzc?p=preview and I think it's freaking out, in part, because I'm using Restangular.

I have the following:

angular
    .module('estimate', ['ui.router', 'restangular', 'estimate.project'])
;

angular
.module('estimate.project', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider'
        , function($stateProvider, $urlRouterProvider, $locationProvider) {

    $stateProvider
       .state('project', {
            url: "/project/{id:int}",
            abstract: true,
            templateUrl: '/app/templates/project.html',
            controller: "ProjectController as project", 
            resolve: { // stuff }
        })
        .state('project.overview', {
            url: "",
            templateUrl: "/app/templates/overview.html"
        })
        // ...
    ;
}])
.controller('ProjectController', ['$scope', 'ProjectService', 'myProject'
          , function($scope, ProjectService, myProject) {

    console.log('i made it!');

}]);

And in my template, which is served from the estimate module, I have:

<li><a ui-sref="project.overview({ id: 1 })">One</a></li>

The URL resolves correctly on the page, but clicking on it does nothing. It doesn't even throw any console errors - it just sits there. My gut tells me it has to do with how I'm referring to the controllers and/or the routes, and if they need to be prefixed or modified to work with a submodule. Any ideas on how to get it to load properly?

If this post is too scatterbrained, let me know and I'll try to clean it up.

Answer 1

I updated your plunker here and would say, that the most important change is - referencing sub-module in the main module:

Instead of this:

angular
    .module('estimate', ['ui.router', 'restangular'])
    ...

angular
    .module('estimate.project', ['ui.router'])
    ...

We have to use this, i.e. reference sub module in a parent module

angular
    .module('estimate', ['ui.router', 'restangular', 'estimate.project'])
    ...

angular
    .module('estimate.project', ['ui.router'])
    ...

With some few other small adjustments, that should be the way. Check it working here