Preloading Strategies In AngularJS Framework

Preloading Strategies In AngularJS

AngularJS is a useful platform for front-end developers, it provides developers with a single integrated solution for web application development. With everything inclusive in it, this platform requires no external frameworks or plugins for building an application. AngularJS is a progressive platform due to which various web development companies are making use of it. This platform allows developers to use MVVM (Model View View-Model) patterns, dependency injection, REST actions, offers data binding, inbuilt templating using HTML and built-in unit testing APIs.

In this blog, we will discuss about implementing custom preloading strategy to control a lazy-loaded module is downloaded onto the client machine with this preloading strategy property.

Now lets assume in our project we've got two modules employee module both these modules are configured to be lazy-loaded now if we set preloading strategy property to know to preload then none of these two modules will be downloaded in the background on the other hand if we set preloading strategy property to all the modules then both the modules will be downloaded in the background so the important point to keep in mind is with these two built-in preloading strategy option values we can either preload all the lazy loaded modules in the background or none of them but if we want to preload some of the lazy-loaded modules but not the others 

Example;- In our case, we want to preload the employee module but not the admin module well that's exactly when we implement a custom preloading strategies we implement custom preloading strategy as a service so let's use angular CLI and generate a service. 
Command:- ng g s custom-preloading.service

In service component:-

@Injectable({
providedIn: 'root'
}
export class CustomPreloadingService implements PreloadingStrategy{
  preload(route: Route, fn: () => Observable): obervable{
    if(route.data && route.data['preload']){
     return fn();
    }else {
      return of(null);
    }
  }
  constructor(){}
}

This service class needs to implement the angular's built-in pre strategy abstract class PreloadingStrategy which is import from the router package. vs code, says preloading strategy as an interface but we know its an abstract class This method has got two parameters the first parameter is called route and it is of type route this parameter provides us access to the current route and the second parameter is called F n as the name implies its a function.

Now the important point to keep in mind is, this is the  function that preloads a given module to specify if we want a lazy-loaded module to be pre-loaded or not we going to include a setting on the route of that lazy-loaded module in our case the lazy loaded module is employee module and the route for that is present in this file app.routing.module here's the route for our employee module.

app.routing.module.ts

import {RouteModule, PreloadAllModules form '@angular/router';
import { CustomPreloadingService } from './custom-preloading.service';

const appRoutes: Routes = [
 { path: 'employees', data: {preload: true}, loadChildren: './employee/employee.module}
];

@NgModule({
imports: [
RouterModule.forRoot(appRoutes, {preloadingStrategy: CustomPreloadingService})
],
exports: [RouterModule]
});

Within the route object here this data property I can pass any arbitrary data to this route and a value for this is an object within this object include any data that you want to pass to this employees route I'm going to include a custom property here I'm going to name it to preload you can name it anything you want and the value for this is going to be true because we  want the employee module to be pre-loaded if you don't want it to be preloaded then said this property value to false 

In our case, we want to be pre-loaded so let's say it to true so the important point keeps in mind is we're going to use this preload property to determine if we want a given lazy-loaded module to be pre-loaded not so within our custom preloading service implementation. First check if the given route as got the data property if the data property exist check every scot preload property and if the property value is true if both these conditions are true then that means we want to preload the module for that all we need to do is return this function which preloads the module which returns type of this method it is observable of any which matches with the return type of this preload method.

If any of these conditions is false that's going to come to the else block and we want to return here an observable of null to indicate that we do not want the module to be pre-loaded to return an observable of null we use the off method at this point all that is left to do is specify this service as of custom preloading strategy so within our app routing module instead of using the angular's built-in preload all modules type we're going to use this service as the value for this preloading strategy property we also need to import this service at this point.

Go to the browser and check the network tab and reload our home route notice our employee module is preloaded in the background because we have set the preload property to true. then navigate the route what we have employee module that we see here is this XML HTTP request to retrieve the list of these three employees the employee module is not loaded because it already preloaded now.

Are you planning to upgrade your data-rich business apps? Get in touch with our AngularJS developers at Oodles Technologies for simple yet scalable applications with rich features that cater to complex business requirements. Our developers are well versed in creating customized apps for different business verticals. We develop native apps that are fast, intuitive, and engaging for users across the globe. We enable our clients to market themselves with confidence and establish a prominent presence in their business domain. Apart from offering services in AngularJS, we have expertise in providing other services in SaaS Application development including Mobile Application Development, Multi-Tenant Application Development, and more.