Common path to AngularJS module namespace?

Question

I am new to AngularJS and have been collecting brain attacks on namespace modules in my application.

One limitation is that I need to embed my Angular application inside a div placeholder inside a third-party website (which can also use Angular) without using an iframe. Thus, I can’t just create my modules without a namespace, for example angular.module('users'), since this can conflict with any “user-defined” module already defined in a third-party application.

I came to the following organization:

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) { ...

Is there a more common solution given my limitations above?

Answer 1

@jdp https://github.com/jdpedrie/angular-package-loader, .