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.

It looks like it was getting thrown off by the base href="/" at the top. I've fixed it, and it at least loads now.. — greggilbert
– greggilbert, Commented Dec 26, 2014 at 23:18

Radim Köhler · Accepted Answer · 2014-12-27 06:54:43Z

3

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

answered Dec 27, 2014 at 6:54

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

greggilbert Over a year ago

Thanks Radim, that helps. When I bring all the different modules together in one file, it does work. I guess my issue is in splitting it up into multiple files. For the plunker, I crammed everything into one file; in my code, though, I have different files and am require()ing one into another. I wonder if it was just an issue in how those files are being included..

Radim Köhler Over a year ago

Well, there could be more files... that is absolutely ok. I do have many files. the point is, that the main module - must load others.. MUST ;) good luck with UI-Router

greggilbert Over a year ago

I took your plunker update and broke it down into modules, carefully controlling when angular.module() got called for the main and submodules, and it worked. It was just some breakdown in how and where the initial .module() got called. Thanks again.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related