how to reference a controller inside a sub-module in angularjs

Question

I'm using modules /sub modules on the angular app, my controller doesn't load on a specific route but the view does, according to a comment on this question I should reference the child module inside the main module and that should do the trick.

this is my code for bootstrapping the app:

angular.module('mainApp', ['ui.bootstrap', 'ui.utils', 'ui.router', 'ngResource', 'ngAnimate', 'ngCookies', 'facebook', 'subModule1', 'subModule2', 'subModule3']);

angular.module('mainApp').config(function ($stateProvider, $urlRouterProvider, $locationProvider, FacebookProvider) {
    $stateProvider.state("root",
    {
        url: '',
        abstract: true,
        views: {
            'footer@': {
                templateUrl: "/partial/footer/footer.html",

            },
            'header@': {
                templateUrl: "/partial/header/header.html",
            }
        }
    }).state('root.home', {
        url: '/index',
        views: {
            'container@': {
                templateUrl: '/partial/index/index.html',
                controller: 'IndexCtrl'
                }
            },
        }
    ).state('root.login', {
        url: "/login",
        views: {
            'container@': {
                templateUrl: '/partial/login/login.html',
                controller: 'LoginCtrl'
            }
        },
    });
    FacebookProvider.init('xxxxxx');
    $urlRouterProvider.otherwise('/index');
    $locationProvider.hashPrefix('!');
});

I have the sub-module configuration in a separate folder named /subModule1/submodule1.js

angular.module('subModule1').config(function($stateProvider) {
    $stateProvider.state("submodule1",
    {
        url: '',
        abstract: true,
        views: {
            'footer@': {
                templateUrl: "/partial/footer/footer.html",

            },
            'header@': {
                templateUrl: "/partial/header/header.html",
            }
        }
    }).state('submodule1.dashboard',
    {
        url: '/dashboard',
        views: {
            'container@': {
                templateUrl: '/subModule1/partial/dashboard/dashboard.html',
                controller: 'DashboardCtrl',
                resolve: {
                    dashboardinfo: function($resource) {
                        var resourceGet = $resource('/submodule1/dashboard');
                        return resourceGet.get().$promise;
                    }
                }
            },
            'sideBar@': {
                templateUrl: '/submodule1/partial/sidebar/sidebar.html'
            },
            'navBar@': {
                templateUrl: '/submodule1/partial/navbar/navbar.html'
            }
        }
    });
});

the controller is defined as:

angular.module('subModule1').controller('DashboardCtrl', function ($scope, $interval, $resource, notification, dashboardinfo) { ... }

the index located on the root of the page which is the page layout have the

<html ng-app="mainApp">

and the controller have the ng-controller definiton as follows:

<div ng-controller="DashboardCtrl">

Everything is fine just the controller isn't running, it doesn't get executed by the view.

Have you tried this - controller: 'submodule1.DashboardCtrl', — Robin Rizvi, Jun 14 '14 at 20:51
I tried and I get [ng:areq] Argument 'submodule1.DashboardCtrl' is not a function, got undefined — pedrommuller, Jun 14 '14 at 21:02

score 0 · Accepted Answer · answered Jun 15 '14 at 06:56

The ui-router and ng-controller="DashboardCtrl" are intended to work together. In the ui-router world we are assigning Controllers to views directly in the state definition.

So this (exactly as you have already have it, no change) is enough:

.state('submodule1.dashboard',
{
    url: '/dashboard',
    views: {
        'container@': {
            templateUrl: '/subModule1/partial/dashboard/dashboard.html',
            controller: 'DashboardCtrl',

to say, that the view rendered inside of the ui-view="container" on the root (index.html) should be provided with DashboardCtrl.

There is an example using the above state definition (1:1 as possible).

This is the index.html content:

<div ui-view="header"></div>
<div ui-view="navBar"></div>
<div ui-view="container"></div>
<div ui-view="sideBar"></div>
<div ui-view="footer"></div>

And this links will correctly trigger the above states:

// root
<li><a ui-sref="root.home">root.home</a></li>
<li><a ui-sref="root.login">root.login</a></li>

// dashboard
<li><a ui-sref="submodule1.dashboard">submodule1.dashboard</a></li>

All the other details check here

turns out that I got two files named dashboardCtrl in to different modules, it seems like that were causing the issue, but your answer lead me to my conclusion, so thanks — pedrommuller, Jun 17 '14 at 01:09
Great to see that, also check this http://stackoverflow.com/a/14909537/1679310 ... Service (including Ctrl) naming is fragile thing ;) good luck with angular;) — Radim Köhler, Jun 17 '14 at 05:53

how to reference a controller inside a sub-module in angularjs

1 Answers1

Linked