Riaxe Systems | Blog
Riaxe.com

Mar
20th
Lazy Loading with Angular JS
Author :Alex Parker

Download example form here When your project size increases gradually it’s not always possible to include all controllers & dependency libraries at a time. If you do so, then size of the page & loading time will increases. Alternate way is to load controllers, views & dependencies libraries on demand. Unfortunately, Angular.js doesn’t come with […]

Date : March 20, 2018
No Comments

Download example form here

When your project size increases gradually it’s not always possible to include all controllers & dependency libraries at a time. If you do so, then size of the page & loading time will increases. Alternate way is to load controllers, views & dependencies libraries on demand.

Unfortunately, Angular.js doesn’t come with built-in feature to implement lazy loading. Lazy loading is the practice of loading expensive resources on-demand.

Although there are other methods available, in our project we will discuss about require.js implementation with angular.js. We will discuss about the easiest way to implement require.js in our new/existing project.

We will use angular routing with require.js to achieve our goal.

Here’s how it works:

  • Folder structure for our application

  • In our index.html we will load the following.

  • We will declare require_config.js which contains config for require.js. You can load angularjs, app.js directly or with require.js. To make it more clean & simple for everyone, I have not registered module in require_config.js file.

  • we will add a resolve property on each route and assign it a function that returns a promise. When the specific route is called the resolve function load the target script dynamically and resolves the promise once load is complete.

  • In our app.js file.

    The app.js file defines the application’s main module and also handles configuring routes. Notice that within the config() function an object literal is assigned to app.register (app represents the application’s module). The object literal contains properties that can be used to dynamically register a controller and other AngularJS objects that are downloaded on-the-fly.

  • Application routes are defined using the routeResolver provider’s resolveController() function which accepts the base name to be used to lookup views and controllers as mentioned earlier based on conventions. Here you need to provide the path for the controller file.
  • In your controller file.

  • Application controllers depend on RequireJS to access the object which represents the application’s module and then access the register property to register a controller script with AngularJS. Such registration is needed since the angular.module(“ModuleName”).controller() code will not work properly with dynamically loaded controller scripts.

    It is worth noting that it uses RequireJS’s define() function to get to the app object. It is used to register the controller. Here the app.register.controller() function points at AngularJS’s $controllerProvider.register() function, as shown earlier with app.js.

What about Directives, Filters and other Types?

You can use the same method as controller to register your directive, filters, factory & services.


Article by : Sumeet Roy
Linkedin

 

Share

Leave a Reply

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


*