Currently enrolled in the AngularJS Mastery Course on Udemy, I encountered an odd issue that has left me scratching my head. The code provided seems to function flawlessly for most users, except for a select few.
index.html
<html lang="en" ng-app='try'>
<head>
<script src="./js/angular.min.js"></script>
<script src="./js/app/app.module.js"></script>
<script src="./js/app/app.config.js"></script>
<script src="./js/app/blog-list/blog-list.module.js"></script>
<script src="./js/app/blog-list/blog-list.component.js"></script>
</head>
<body>
<div class='' ng-controller='BlogListController'></div>
</body>
</html>
app.module.js
'use strict';
angular.module('try', ['blogList']);
app.config.js
'use strict';
angular.module('try', [])
.config(function(){});
blog-list.module.js
'use strict';
angular.module('blogList', []);
blog-list.component.js
'use strict';
angular.module('blogList').
controller('BlogListController', function(){
console.log("hello")
});
An error message keeps popping up:
The controller named 'BlogListController' is not registered.
However, upon making a simple adjustment in the blog-list.component.js file by changing the module name like so:
'use strict';
angular.module('try'). <---- CHANGED THIS
controller('BlogListController', function(){
console.log("hello")
});
Miraculously, it starts working as intended.
Why is there a discrepancy in how the code behaves? Which variation holds the correct answer?
PS: All files are loaded in the order specified in index.html.
Your insight would be greatly appreciated.