AngularJS mixing same name controllers from different modules

Question

I was working on an AngularJS web application which had quite a few sub-modules. Two of the sub-modules had the CRUD functionality therefore both these modules had a few controllers with the same name. For an idea of how the code looked like, have a look at the snippet below:

<!DOCTYPE html>
<html>

<head>
  <script data-require="[email protected]" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script>
    angular
      .module('app', [
        'app.one',
        'app.two'
      ]);

    angular
      .module('app.one', [])
      .controller('MyCtrl', function() {
        var vm = this;
        vm.message = 'Hello World from app.one!';
      });

    angular
      .module('app.two', [])
      .controller('MyCtrl', function() {
        var vm = this;
        vm.message = 'Hello World from app.two!';
      });
  </script>
</head>

<body ng-app="app" ng-controller="MyCtrl as vm">
  <h1>{{ vm.message }}</h1>
</body>

</html>

You can also find this at plnkr: http://plnkr.co/edit/JRwJsrJd84nPnjj36GAZ.

Now, the problem is that I'm confused. To me it doesn't make sense for AngularJS to confuse controllers of same names but in different modules. If anyone can explain this and also suggest a way to overcome this, I'd be really appreciate that.

Thanks in advance!

If dig deep - all requires for modules are loaded one by one, consolidating each $provide values in $injector or parent module. Angular.js: function module(name, requires, configFn) { ... }, function loadModules(modulesToLoad) { ... }. From notes $injector is bind to element, so if you have app and all $provided is bind to app element, you just overwrote MyCtrl when you $injected app.two. $inject and $provide works with names as keys, that's why you overwrote it. — Appeiron
– Appeiron, Commented Jul 18, 2016 at 15:17

Srijith · Accepted Answer · 2016-07-18 11:33:54Z

1

You should have unique names for your controllers. In your app.js you do like below

angular
    .module('app', [
        'app.one',
        'app.two'
      ]);

Angular will load both app.one and app.two When you have a controller called MyCtrl in both of these modules, it is just going to pick up the most recent one. In this case, the controller from app.two.

You could overcome this by selectively loading which modules you want based on a condition or else simply have unique controller names!

answered Jul 18, 2016 at 11:33

Srijith

1,4449 silver badges14 bronze badges

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

2 Comments

Haseeb Ahmed Over a year ago

This part I figured out, what I can't understand is that lets say, if I try to load a controller from within a module (let's suppose using ui.router)... still it gets the controller in the last loaded module. Doesn't this kind of, kill the purpose of encapsulation? Or am I looking at this wrong?

kyrisu Over a year ago

@haseebahmed7 - look at this question: stackoverflow.com/questions/30804362/… - setting isolated scope on the directive solved the problem for me.

Collectives™ on Stack Overflow

AngularJS mixing same name controllers from different modules

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related