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?

I don't know if "avoid" is the right idea here. I think you're just asking how to use your AMD modules is all. What is the best way to consume old AMD modules is the real question here. I'm not sure the answer. I came to this question in a slightly different manner. But I wouldn't really recommend avoiding Angular's pattern. But I'd be very curious as to the best approach to consuming AMD modules made in other projects, etc. The other answers are interesting, but I don't feel they've really done this question justice. — vbullinger
– vbullinger, Commented Apr 8, 2014 at 21:14

Jeff Whelpley · Accepted Answer · 2013-04-24 12:23:26Z

2

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.

answered Apr 24, 2013 at 12:23

Jeff Whelpley

5791 gold badge5 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

abject_error · Accepted Answer · 2013-04-25 04:56:30Z

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.

answered Apr 25, 2013 at 4:56

abject_error

2,9381 gold badge23 silver badges24 bronze badges

2 Comments

mikemaccana Over a year ago

Thanks. My team also uses AMD as a standard across a wide variety of apps, so being able to load those modules without having to convert them to another, less common format is important.

FutuToad Over a year ago

what is the best practice now for angular devs?

Collectives™ on Stack Overflow

How do I load AMD modules when using Angular JS?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest