A lot of modern web applications are using Angular to power their apps.
It is a platform to allow us to create single page applications that deliver a very fluid user experience compared to traditional methods in the old days.
Table of Contents
Angular Pain Points
Although it is a great framework, there are some pain points.
One of the thing we found is, Angular 1.x does not come with lazy loading built-in.
Much of the resources, such as JavaScript, are needed to be loaded up-front, usually on the homepage of the site (for single page application).
Most of the time, you need to includes all of the JavaScripts for the entire site on page load, even though you might not visit the page that use that JavaScript.
This becomes quite a problem since it increase the amount of code the browser needed to load just for the app to run.
The problem becomes even more dramatic for mobile sites where every second of loading time counts.
Utilizing DevOps services can help streamline the deployment process, ensuring that applications like Angular are optimized for performance with strategies such as lazy loading.
Using ocLazyLoad
Luckily for our problem, there is a library out there to solve this issue and save us from our headache.
The ocLacyLoad library is designed to do just that.
It is an open source project that is gaining popularity in recent days.
You can visit their website here.
The library is a nice addition to Angular.
This allows us to load the resource that we want just when we need it, not before.
So, we don’t have to define a gigantic script block that loads pretty much every single JavaScripts in the site.
You can define those resources separately where it relevant, such as when you define Anuglar route.
This helps quite a bit with code maintainability.
Angular Route Example
If you use Angular ui-router, this script block defines a state for the route to contact us page.
Some of us visit the Contact Us page, and some of us don’t.
We should just load the page HTML and JavaScript right when you visit the Contact Us page, not when you visit the homepage.
To solve our problem, we define a ‘resolve’ parameter for the state.
Before loading the state, Angular will determine the value of this parameter.
We can define the required resources for the page here. In this case, we load ‘ContactUsController.js’ right when we need it.
That’s it.
Our problem is gone.