I am new to AngularJS and currently exploring different ways to namespace modules in my application.
One challenge I face is the need to integrate my Angular app into a designated placeholder div within a third-party website (which may also use Angular), without resorting to an iframe. Therefore, creating modules without namespaces, such as angular.module('users'), is not feasible as it may clash with any existing 'users' module in the third-party application.
After considering various options, I have structured my modules as follows:
angular.module('mycompany.productname', [
'ngRoute',
'mycompany.productname.forms',
'mycompany.productname.users',
'mycompany.productname.services'
]);
angular.module('mycompany.productname.forms').controller('formEditController', ['$scope', function($scope) { ...
angular.module('mycompany.productname.users').controller('userAccountController', ['$scope', function($scope) { ...
angular.module('mycompany.productname.users').controller('userLoginController', ['$scope', function($scope) { ...
angular.module('mycompany.productname.services').service('forms', ['$scope', function($scope) { ...
Given my specified constraints, I am curious to explore alternative solutions that are more widely adopted. Is there a common approach that aligns with these requirements?