Book Image

MEAN Cookbook

By : Nicholas McClay
Book Image

MEAN Cookbook

By: Nicholas McClay

Overview of this book

The MEAN Stack is a framework for web application development using JavaScript-based technologies; MongoDB, Express, Angular, and Node.js. If you want to expand your understanding of using JavaScript to produce a fully functional standalone web application, including the web server, user interface, and database, then this book can help guide you through that transition. This book begins by configuring the frontend of the MEAN stack web application using the Angular JavaScript framework. We then implement common user interface enhancements before moving on to configuring the server layer of our MEAN stack web application using Express for our backend APIs. You will learn to configure the database layer of your MEAN stack web application using MongoDB and the Mongoose framework, including modeling relationships between documents. You will explore advanced topics such as optimizing your web application using WebPack as well as the use of automated testing with the Mocha and Chai frameworks. By the end of the book, you should have acquired a level of proficiency that allows you to confidently build a full production-ready and scalable MEAN stack application.
Table of Contents (13 chapters)

Route preloading with Angular modules

Angular's route loading is considerably optimized through its AoT template generation. However, you can actually tune and refine Angular's router preloading options through some configuration options in your router. These options are most interesting when you are optimizing your web application for mobile contexts where your application's load performance has a very high impact on your application's user experience.

Getting ready

Let's make our posts module a lazy loading module so that our application will start more quickly. We'll pair that module loading behavior with Angular's module preloading capability so that our app will still launch quickly, but will also load the posts module in the background after the application has started up without waiting for the user to navigate to /posts.

How to do it...

  1. To take advantage of route preloading, we first have to turn it on in our root router configuration. By default, the Angular router comes with one of two preloading strategies; preload everything with PreloadAllModules, or preload nothing with NoPreloading:
...
import {RouterModule, PreloadAllModules} from '@angular/router';

@NgModule({
...
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot(ROUTES, { preloadingStrategy: PreloadAllModules })
],
...
})
export class AppModule { }
  1. Now that we have enabled preloading on our root router configuration, we have to enable lazy loading modules. For our router configuration, we must provide our lazy loaded child module in a string format using the loadChildren property. We also must provide the name of the module class itself to be invoked by the preloading strategy:
...
const ROUTES = [{
path: "posts"
loadChildren: "posts/posts.module#postModule"
}];
...
  1. With this configuration in place, the application will automatically start preloading this posts, lazy loading module after it initially bootstraps the Angular application.

How it works...

The point of lazy loading is that it delays the startup cost associated with loading a module until the application makes a specific call to load it. This lowers the overall start up cost of the application, but the potential downside is that the module will be a bit slower to get started when the user attempts to access it. By pairing this with a preloading strategy, we are actually having our cake and eating it too by asking Angular to preload the lazy loading module after startup, but before the user would potentially fetch the module.