AngularJs: Require.Js Usage

Resource

Before I starting looking into Angular.js I was looking into using Require.js, which is a module loading framework for JavaScript, which allows you to specify your dependencies and preferred module load order. I wrote about this in another article, which you can read here: Modular Javascript Using Require.Js

I have kind of built apon that a bit more in this article (with a little bit of a kick start with the source code that comes with the Angular.js O’Reilly book : https://github.com/shyamseshadri/angularjs-book)

So that is where you can do more reading around this subject if you want to, but let’s crack on and see what the Require.js element of the attached Angular.js website looks like shall we.

It starts with this sort of code in the main Angular.js page (Index.html):

See index.html

This is standard  Require.js code that tells Require.js which is the main bootstrap code file that it should run. It can be seen that this is scripts/main, so let’s have a look at that now shall we

See scripts\main.js

There is quite a bit going on here.It does however boil down to 3 parts

  1. We configure Require.js with the paths of where the JavaScript files are
  2. We configure a preferred load order for Require.js by using the Require.js shim. The shim essentially sets up the dependencies for the libraries to load
  3. We then use Require.js [Require] to tell the Angular.js application what dependencies we would like to be satisfied.

I have also used Require.js to satisfy the demo applications controller requirements. An example of which is as follows:

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA