Take a look at this code snippet:
angular.module('app', ['app.core'])
.factory('NameService', function() {
return {
getName: function() { return 'Omar' ;}
};
});
angular.module('app.core', [])
.controller('MainController', function($scope, NameService) {
$scope.name = NameService.getName();
});<body ng-app="app">
<div ng-controller="MainController">
{{name}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
</body>The output will show "Omar". Although NameService is defined in the app module which is not listed as a dependency of the app.core module. It might seem like there could be circular dependencies, but it still works. Why is that?