Angular UI-router, controller is undefined

Question

I am kind of new to the AngularJS framework and I am trying to migrate my test project using the standard router to use the UI-router, but I get the following error:

Error: [ng:areq] Argument 'mainCtrl' is not a function, got undefined

What I have done so far is:

Controller:

// mainCtrl.js
angular.module("sm-web")
    .controller('mainCtrl',['$scope',
            function($scope) {
                ...
    }]);

Router:

angular.module('sm-web', ['ui.router'])
    .config(['$stateProvider', '$urlRouterProvider', function( $stateProvider, $urlRouterProvider ) {

    $urlRouterProvider.otherwise('root');

        $stateProvider
            .state('root', {
                url: '',
                templateUrl: path + 'ng/sm/view/main.html',
                controller: 'mainCtrl'
        });

    }]);

Index:

<body ng-controller="mainCtrl">
    <main-menu></main-menu>
    <div class="container">
        <div ui-view></div>
    </div>
</body>

This works when I use the standard router, but not with the UI-router. Does anyone have any idea of what I am doing wrong?

no need to write ng-controller="mainCtrl" you already bind mainCtrl to ng/sm/view/main.html template in your router. — gaurav bhavsar
– gaurav bhavsar, Commented Sep 7, 2015 at 15:32
The otherwise method receives an url, not a state. I'm not sure that it's cousing your problems, but give it a try. — gfpacheco
– gfpacheco, Commented Sep 7, 2015 at 16:16
Is the mainCtrl.js file loaded before the file that contains the router config? — Sunil D.
– Sunil D., Commented Sep 7, 2015 at 17:04
@SunilD. I have tried to loading them in different orders without success. :( — Prince John
– Prince John, Commented Sep 7, 2015 at 17:34

Sunil D. · Accepted Answer · 2015-09-07 18:22:17Z

1

It seems you have an issue w/the order you declare things. For you to declare the module "sm-web" you need to do this:

angular.module('sm-web', ['ui.router']);

Note that the presence of that 2nd array argument is what tells Angular that you're declaring the module (eg. creating a new module). When you leave that 2nd argument out, you're retrieving the module you previously declared.

So with that in mind, look at how it all is coming together in your code:

To declare the controller, you retrieve the module "sm-web" (by leaving off the 2nd array arg).
When configuring the router states, you declare a new module "sm-web". But note that immediately after you declare this new module, you try to register a state with the controller named "mainCtrl" -- but that doesn't exist yet.

You need to create the module somewhere before doing all of the above. After creating the module, then register the controller on the module. Finally, with the controller defined, then you can register the state that uses the controller.

There's too many ways to solve this ordering problem, so I'm not going to suggest anything further. It depends on what files the code lives in and the order you load those files in index.html.

answered Sep 7, 2015 at 18:22

Sunil D.

18.2k6 gold badges55 silver badges69 bronze badges

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

2 Comments

Prince John Over a year ago

Well, as I told SunilD I have tried to order the imports differently, but without success. However, even if there is an error with the imports, how come the code works using a different router?

Prince John Over a year ago

Turns out this was correct. I was incorrectly adding ui.router in my router.js instead of in my app.js (I didn't show the contents of this file in my question because I thought nothing was wrong with it). Thanks a lot!

BERGUIGA Mohamed Amine · Accepted Answer · 2015-09-07 15:33:54Z

0

In order to avoid your problem change your code by the following code:

// mainCtrl.js

angular.module("sm-web")
    .controller('mainCtrl',['$scope',
            function($scope) {
                ...
    }]);

answered Sep 7, 2015 at 15:33

BERGUIGA Mohamed Amine

6,3203 gold badges43 silver badges42 bronze badges

1 Comment

Prince John Over a year ago

Sorry, the ' is missing because I accidentally removed it when I edited the question. My bad.

Collectives™ on Stack Overflow

Angular UI-router, controller is undefined

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related