How do I load AMD modules when using Angular JS?

Question

For some strange reason Angular JS has its own module system that is neither AMD nor CommonJS.

I have many existing modules in AMD format. I would like to use them in an Angular app.

I would like to avoid rewriting any AMD modules. If possible, I would also like to avoid using Angular's own module system.

Is it possible to use AMD modules when using Angular? is it possible to avoid Angular's custom module system?

Answer 1

You do need to define Angular components in the "Angular way" (ex. angular.module('yourApp').directive('someDirective', ...)), but you can certainly use AMD both for wrapping Angular components and for pulling in non-Angular components to Angular. Check out this seed project.

Answer 2

You cannot replace Angular's module definitions with AMD defines. You have to wrap your Angular code in AMD defines for now.

Another thing to note is there is no real way to "lazy load" modules at the moment. You'll have to eventually require all the angular modules you're going to use in your application in your main angular module definition, so the benefits of using AMD is limited for now.

The dev team says they'll support lazy loading at some future point, which is the only reason to wrap your files in AMD now.