Here’s a trick I’m using to easily define reusable components over multiple files, contained within a specific module (which will function as a collection of components).

First, know that calling angular.module('MyModule') references an existing module, whereas angular.module('MyModule', []) always creates a new one (overwriting the old one)! So this poses the question: Where do we create the generic module? The answer is: either you include a javascript file that does this, or you do it manually for each app.

For example, let’s define an MainApp module and a GenericComponents module, with components spread across files. Here’s one way to do that:

read on