How to load controllers in AngularJS dynamically?

Question

I have many controllers in app and I don't want to load them upfront as the combined JS becomes very heavy.

So I have tried following:

In my main app.js, I have route defined as below:

$routeProvider.when('/myaccount', {
    templateUrl: 'my-account.html',
    title: 'My Account'
})

The my-account-controller.js has controller defined like:

angular.module('myApp',[]).controller('my-account', ['$scope', function($scope) { 
    $scope.greeting = 'Hola!';
}]);

And finally in my-account.html, I have a script tag which should load the controller syncronously before using it. I am attaching that contorller with ng-controller directive:

script src='/assets/my-account-controller.js'
<div class="container" ng-controller='my-account'>
   ...
</div>

The problem is somehow, Angular can not identify my-account as controller and it throws following error:

Error: [ng:areq] Argument 'my-account' is not a function, got undefined

Can someone tell me what is the missing piece?

did you find a way to do so though? I also have a same problem — Siddharth
– Siddharth, Commented Dec 25, 2016 at 9:08

taxicala · Accepted Answer · 2015-09-15 14:51:55Z

1

You should use UpperCamelCase in your controller name, and i don't know if you already have defined myApp, if yes, you should remove the second argument from the module method since it will reset the dependencies:

so this -> angular.module('myApp',[]) should be -> angular.module('myApp')

angular.module('myApp').controller('MyAccount', ['$scope', function($scope) { 
    $scope.greeting = 'Hola!';
}]);

And in your view:

<script src='/assets/my-account-controller.js'
<div class="container" ng-controller='MyAccount'>
   ...
</div>

And the route:

$routeProvider.when('/myaccount', {
    templateUrl: 'my-account.html',
    title: 'My Account',
    controller: 'MyAccount'
});

You can read more about angular best practices here

edited Sep 15, 2015 at 14:51

answered Sep 15, 2015 at 14:39

taxicala

21.8k7 gold badges41 silver badges67 bronze badges

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

4 Comments

taxicala Over a year ago

@MitulShah check my edit regarding the dependencies, I believe you should not be passing the second argument there.

Mitul Shah Over a year ago

The only problem here is I don't want to specify the controller inside route file as there are many controllers. So I am using ng-controller directive for that in HTML, after loading the my-account-controller.js with script tag, but somehow Angular is still not able to identify that as controller. Maybe we need it specified before hand?

taxicala Over a year ago

did you try removing the second parameter from the module method? the empty array. try removing it please.

Mitul Shah Over a year ago

Yes, I removed them. I think the problem here is: I have a script tag inside the template, which is not executed. And so effectively my-account-controller.js is never executed.

VDarricau · Accepted Answer · 2015-09-15 14:39:39Z

0

This is not the proper way to do it. You have to declare your controller in the route you are using such as

$routeProvider.when(''/myaccount'', {
              templateUrl: 'my-account.html',
              controller: 'my-account',
              title: 'My Account'
})

answered Sep 15, 2015 at 14:39

VDarricau

3,1493 gold badges21 silver badges24 bronze badges

3 Comments

Mitul Shah Over a year ago

Yes, but in that case I have to load my-account (plus all other) controller in that file, which is something I don't want.

VDarricau Over a year ago

I don't think so. If for each view you have one controller this is the best way to do it. Moreover, the proper way to name a controller (according to AngularJs documentation) would be MyAccountController in your case. You should start with that.

Mitul Shah Over a year ago

Yes, I tried to specify MyAccount as controller without loading that in this file which throws an error. I have already renamed the controller.

Collectives™ on Stack Overflow

How to load controllers in AngularJS dynamically?

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related