AngularJs with ocLazyLoad and webpack

Recently i got chance to work with 2 technologies. One is the most popular framework and another is the latest version of the later one. Its AngularJS and Angular2. Most interesting thing was, i had to write the entire code in ES6. Intresting?

Scenario

The scenario is interesting. Most SPA in AngularJS face a big challenge. As the project grows it will become slow to load. The modules, libararies. Everything need to be loaded in the initial stage. In this scenario lazy loading comes in to handy. The modules and libraries only be loaded whenever they were required and it's dynamically added to the application. Though Angular2 supports lazy loading by dafault, AngularJS doesn't support lazy loading by default.  And also angular need to register the directives, controllers etc. It will create so many requests for a single module. If we could bundle all the required templates, js ,css into a single file we could reduce the number of requests send to the server for retrieving the files. 

We will use ocLazyLoad for lazily load the modules and dynamically register the controllers. We are going to use webpack for bundling.

AngularJS

Most popular Javascript framework. One of the fast developing community. 

Webpack

 Webpack is a bundling tooll used to bundle js, html, css files together . It also minifies and uglifies it. There are other options like systemjs and jspm . But webpack is one of my favourite and it comes with a development server.

ocLazyLoad

ocLazyLoad is angular module with supports lazy loading the modules. Requirejs is another option. But requirejs only loads the modules , it doesn't dynamically register the angular components. On the other hand oclazy helps to dynamically register the angular components.

That's said, you could find the code at github. Fork it use it and let me know the results.

Folder structure

Webpack.config

The config file for webpack. We will define the loaders and the bundling startegy in here. For js loader we will be using babel. Note that we are excluding the node_modules and the vendor folder. Vendor folder will be used store third-party frameworks which may cause problem while we load using the babel. Also we are loading the jquery and loadsh and use it as global provider, so that we could access it from anywhere. For styling you could use css or scss .

build

The build folder where the bundles generated. The index file will be located here. 

src

Actual code resides here.

src/app.js

The main entry file where we bootstrap and inject the dependencies. The base.scss will loaded here. 

Installation 

For installation clone the repo. Inside the project folder run `npm install`.

Then  run `npm run dev` for runing the development server. Access the app at `localhost:8080`

For building the app run `npm run build`, which will create the bundles for the app.

Update(13 Nov 2017): Added lot of features.

1. HTML templates will be lazy loaded as bundles
2. Added separate config files for build and developement
3. Removed build folder, will be created on build process only. All assets will copied to build from src
4. Changed font importing moved to base.scss from config.scss to avoid style breahdown
5.  gzip support added in build