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.

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

 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 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

Comments

Post a Comment

Popular posts from this blog

Configure PostgreSQL and phpPgAdmin in WAMP

As i told earlier am trying to switch to Flex , i am trying to learn connection between PHP and Flex. When searched i got a excellent tutorial . But the problem is that it uses PostgreSQL. As i don't have any prior experience in PostgreSQL i try to install it in my Windows 7 and configure it in WAMP . I got different errors and spend almost two days in searching and using different methods . Atlast i got it right. I will try to figure out the steps i have done.
Am using
PostgreSQL 9.1WAMP Server 2.0e phpPgAdmin 5.0.2 WAMP consists
1. Apache Version :2.2.17  2. PHP Version :5.3.5  3. MySQL Version :5.5.8 First install PostgreSQL , no need to install additional plugins like phpPgAdmin.
Install WAMP server where ever you need.
Download PhpPgAdmin  and unzip it to WWW folder in WAMP installation.

At this point if you try to access the http://localhost/phpPgAdmin/ you may get this error.

Your PHP installation does not support PostgreSQL. You need to recompile PHP using the --with-pgs…
Read more

Upload Video to Facebook Using Actionscrpt 3.0

For the last one week am searching for uploading video to Facebook using Graph Api from Flash. First challenge is to find something which will help to capture video from webcamera and convert it to ByteArray.
The problem is Actionscript doesn't had any utlity to save video from webcamera. It uses Flash media server to save video. But i need something which not uses any server side acript.
After searching several hours in google i found a link.
http://www.zeropointnine.com/blog/updated-flv-encoder-alchem/

In this utility it uses snapshots from the webcamera which will encode it . Though it had some drawbacks and limitations, it serves my requirement for small videos. I used it for creating videos.

Next i need to upload video to facebook. This is the api used to connect facebook using Actionscript.

http://code.google.com/p/facebook-actionscript-api/

This API uses a different function for uploading videos to facebook .Facebook.uploadVideo(). The reason for different function is that ,…
Read more

Adding proxy in YUM Fedora 13

Recently i need a linux machine in my office for server . So i installed Fedora 13 and try to install mysql server using yum. But i can't complete it because yum is not connecting to internet. It's because of our proxy server. 
Before 2 months i installed Fedora 12 and failed to install Mysql using yum.
I just searched for setting proxy in yum and got the answer for it. This is the solution, 1. open /etc/yum.conf 2. add proxy=http://proxyaddress:port
Voila :D , it works fine for me. Atlast my 3 months quest ends here . :P .
Read more

Angular 4 - Modules, components and routing

Image
In the previous post we created a new Angular 4 project. Lets check the how to add modules, components and routing.

You could check out the code from here.
git checkout -b part2.0 origin/part2.0
We are going to use bootstrap styling . So lets add bootstrap in our aplication . We are going to use only styling not the components.

npm install bootstrap@3
We need to add the bootstrap stylesheet in tha .angular-cli.json.


"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ],
Our first Module

Lets add a new module employee. Inside "src/app" run

ng generate module employee or
ng g m employee
Wait we are going to lazy load this module , so we need routing inside the module, right? So we are going to create the routing also.
ng g m employee --routing
Time for component

It will create new employee module with its own routing.lets add a component for listing the employee. So inside employee folder run

ng g c empl…
Read more

Angular4 - primeng, ngx-bootstrap

In previous post we tried to create module, component and routing. Lets look into how to add third party libraries.

You could check out the code from here.
git checkout -b part3.0 origin/part3.0
In Angular4 adding third party libraries is pretty easy. Install using npm and add the module. Its one of my most loved feature in Angular4.

PrimeNG

PrimeNG is one of the most used and most popular Angular4 library. It consists lot of components and its easy to setup and use. Besides it does have a good team working behind this library. In my experience it's one of the fast developing library.
To install PrimeNg run

npm install primeng --save
npm install font-awesome --save
PrimeNg needs font awesome for icons . Unlike any other libraries , PrimeNG had separate module for each component, which helps to include only selected component in the bundle.
Lets include styles for the components. In .angular-cli.json add

"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.cs…
Read more