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

Add user login and MFA to your next project in minutes. Create a free Okta developer account, drop in one of our SDKs to your application and get back to building.

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.

Launch your application faster with Okta’s user management API. Register today for the free forever developer edition!

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.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}