How do I add a controller to a module in Angular JS

Question

I have the following in my app.js:

var app = angular.module('app', ['admin', 'ui.compat', 'ngResource', 'LocalStorageModule']);
app.config(['$stateProvider', '$locationProvider',
    function ($stateProvider, $locationProvider) {
        $locationProvider.html5Mode(true);
        var home = {
            name: 'home',
            url: '/home',
            views: {
                'nav-sub': {
                    templateUrl: '/Content/app/home/partials/nav-sub.html',
                }
            }
        };
        $stateProvider.state(home)
    }])
    .run(['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
        $state.transitionTo('home');
    }]);

in admin.js:

angular
    .module('admin', ['ui.state'])
    .config(['$stateProvider', '$locationProvider',
    function ($stateProvider, $locationProvider) {
        $locationProvider.html5Mode(true);
        var admin = {
            name: 'admin',
            url: '/admin',
            views: {
                'nav-sub': {
                    templateUrl: '/Content/app/admin/partials/nav-sub.html',
                }
            }
        };
        var adminContent = {
            name: 'admin.content',
            parent: admin,
            url: '/content', views: {
                'grid@': {
                    templateUrl: '/Content/app/admin/partials/content.html',
                    controller: 'AdminContentController'
                }
            }
        }
        $stateProvider.state(admin).state(adminContent)
    }])

I am confused about how to wire up my AdminContentController. Currently I have the following:

app.controller('AdminContentController',
    ['$scope', 'entityService', 'gridService', 'gridSelectService', 'localStorageService',
    function ($scope, entityService, gridService, gridSelectService, localStorageService) {
        $scope.entityType = 'Content';

Can someone verify if this is the correct way for me to set up my module and add it to app. Should I be adding the controller to the app:

app.controller('AdminContentController',

or should this belong to the module 'admin'. If it should then how should I wire it up?

Chandermani · Accepted Answer · 2013-08-29 07:34:29Z

5

Based on what you have shared, the the controller should be created on admin module such as

var adminModule=angular.module('admin');   // This syntax get the module
adminModule.controller('AdminContentController',
    ['$scope', 'entityService', 'gridService', 'gridSelectService', 'localStorageService',
    function ($scope, entityService, gridService, gridSelectService, localStorageService) {
        $scope.entityType = 'Content';

You could also define the controller in continuation of your admin module declaration.

answered Aug 29, 2013 at 7:34

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

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

2 Comments

Alan2 Over a year ago

Thanks very much. I have 7-8 controllers so maybe better to define each in its own file.

Alan2 Over a year ago

Sorry for my delay. Would it be okay to use angular.module('admin').controller('AdminContentController', at the start of each controller file? The reason I ask this is because I am not sure which controller file would get called first and if I do as you suggest then would I not have 7-8 multiple definitions of "var adminModule". One in each file.

hesa · Accepted Answer · 2013-08-29 08:48:24Z

5

Yes that would work angular.module('admin') works as a getter. So you'll get the same module in each file.

answered Aug 29, 2013 at 8:48

hesa

4511 gold badge4 silver badges9 bronze badges

Collectives™ on Stack Overflow

How do I add a controller to a module in Angular JS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related