Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

RequireJS: AngularJS solutions for (almost) every constraint

DZone's Guide to

RequireJS: AngularJS solutions for (almost) every constraint

· Web Dev Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

So, you like RequireJS. No, you probably adore it. Enough to want to evangelise it’s benefits to anyone who will listen. And now you have AngularJS, which is pretty neat. Or so you think. At least, you probably are using it on your project.

There’s one problem. Your team has not bought into the benefits of module loaders. They think nothing of putting a zillion script tags in your HTML. It doesn’t matter whether the opposing faction is one tech lead, or a few peer developers. Or maybe they are fine with the idea of module loading, but balk at the idea of wrapping all their Javascript code in “ugly” define()’s.

I’ll describe ways to inject RequireJS into your AngularJS projects with minimal disruption, depending upon the set of constraints you find yourself saddled with. I usually say that there’s no “best” way to use RequireJS in your project. However, there are certainly preferred ways to use it, and I’ll note them as I go along.

This post is still a work in progress; expect updates.

1) Use RequireJS piecemeal, wherever you’re writing new code.

  • You’ll use both Angular’s Dependency Injection and RequireJS.
  • This does not get rid of top-level script tags because you’re not in control of the project structure/Angular bootstrapping.
  • You’ll have RequireJS configurations inside your controllers, which might look a bit ugly.
  • You will have to set up Angular controllers/factories/services, in order to unit test them. Since the smaller building blocks can simply come from RequireJS modules, some unit tests might not need this initialisation.

2) Use RequireJS during bootstrap, using Angular’s Dependency Injection for all modularisation.

  • You won’t utilise RequireJS module dependency resolution features, with this method.
  • You will get rid of script tags.
  • You will have to necessarily bootstrap your Angular app manually, with this approach.
  • Angular controller/service/object declarations will not need to be defined inside RequireJS modules.
  • You will have to set up Angular controllers/factories/services, in order to unit test them. Since all building blocks will be Angular components, you’ll have to do this for every unit test.

3) Use RequireJS during bootstrap, using Angular’s Dependency Injection for service/factory/controller/coarse-grained objects only. All service/factory/controller declarations come from RequireJS modules.

Note: I prefer this approach.

  • This allows you to unit test controller/service logic without having to initialise Angular modules in unit tests.
  • You will get rid of script tags.
  • You will have to necessarily bootstrap your Angular app manually, with this approach.
  • You’ll invoke RequireJS inside controllers/services, etc., as needed.

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda

Topics:

Published at DZone with permission of Avishek Sen Gupta, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}