AngularJS With Require.js

This article shows how to implement an AngularJS application with require.js that is loading the JavaScript files when it is required. This will increase the performance of the application's loading time.

The attached source file is the same from the previous article for AngularJs multilingual but now it is implemented with require.js.

Before diving in we should have the basic knowledge of require.js.

Tip on Require.js

The Angular application must have at least one require keyword before using the define keyword to build the dependencies that act as the root of an application as in the following:

require([‘route’],function(){
   angular.bootstrap(document,['angular module name']);
});

Require.js injects classes/references, AngularJs injects instances.

Let's dive in into the step-by-step implementation. It would be helpful for novice AngularJs developers.

Step 1

Download and provide the require.js as a reference to the index page.

Step 2

Create a main.js file and reference this file name to index the page as in the following:

<script data-main="Scripts/main.js" src="Scripts/require.js"></script>

The preceding line states that after require.js loads successfully, load the main.js file.

Step 3

We need to learn the basic configurations of require.js that is required to setup the main.js file.

• requirejs.config ({}): Configure the libraries path and alias.
• baseUrl: Loads the libraries (JavaScript files) from the specified path.
• paths: Libraries (JavaScript files) resided path.
• shim: Mentioning the dependencies to be loaded.

Some more configurations are also there, but this would be enough to proceed.

Step 4

We should manually do the bootstrapping of an Angular module not by using ng-app like the following:

angular.bootstrap (document,['angular module name']);

In the main.js file, we require route.js as a dependency to load the Angular module.

Step 5

In the app.js file, return the created Angular module.

In route.js file, keep the Angular module config section.

Step 6

In the shim config, we gave the dependencies to be loaded for app.js when creating the Angular module.

In the route.js file, we should pass a dependency as our created Angular module. Then we have various states for state-level routing that have different controllers and services as a dependency to be loaded for each state.

In the corresponding controller file, we need to ensure which JavaScript file needs to be passed as the dependency. I provide you an example for understanding this, if our controller file has a dependency with the Angular service then that service.js file should be passed as the dependency for our controller.

Style Guide

1. As per AngularJs style guide, an Immediately Invoked Function Expression (IIFE) is implemented across the sample application like the following:
   

   (function(){
   
   })();

2. The sample source code is implemented using a “By Feature” application structure. We can design our application structure in two ways. Either by feature (for example, Customers, Products and so on) or by type (Services, Controllers or Filters).
   
   

The remaining are all the same as we did in my previous article. Find the source code here.