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
– Robin Rizvi, Commented Jun 14, 2014 at 20:51
I tried and I get [ng:areq] Argument 'submodule1.DashboardCtrl' is not a function, got undefined — pedrommuller
– pedrommuller, Commented Jun 14, 2014 at 21:02

Radim Köhler · Accepted Answer · 2014-06-15 06:56:27Z

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
Great to see that, also check this stackoverflow.com/a/14909537/1679310 ... Service (including Ctrl) naming is fragile thing ;) good luck with angular;)

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related