AngularJS - How to access submodule controller with ui-router?

I am struggling a bit with submodules in Angular 1.3.9 app. I have a (non-working, sorry) preview at http://plnkr.co/edit/XBfTPAGRRe0CWJgjGJzc?p=preview , and I think this worries, 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 a module estimate

, I have:

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

      

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

If this post is too scattered, please let me know and I will try to clean it up.

+3


source to share


1 answer


I updated your plunker here and would say that the most important change - a reference to the sub-module to the main module :

Instead of this:

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

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

      



We have to use this one i.e. helper module in parent module

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

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

      

With a few minor adjustments, this should be the way . Check if works here

+3


source







All Articles