Recently, while working on an AngularJS web application with multiple sub-modules, I encountered a situation where two sub-modules had controllers with the same name due to them both having CRUD functionality. Here's a snippet of the code structure:
<!DOCTYPE html>
<html>
<head>
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c3d323b29303d2e72362f1c6d7269726a">[email protected]</a>" 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>
The code above can also be viewed on plnkr: http://plnkr.co/edit/JRwJsrJd84nPnjj36GAZ.
I am currently facing confusion regarding AngularJS treating controllers with the same name but in different modules as distinct entities. If anyone could provide insight into this issue and suggest a workaround, it would be greatly appreciated.
Thank you in advance!