You are viewing our old blog site. For latest posts, please visit us at the new space. Follow our publication there to stay updated with tech articles, tutorials, events & more.

Bootstrapping an AngularJs application

Wednesday, September 2, 2015 | By
0.00 avg. rating (0% score) - 0 votes
AngularJS is a JavaScript MVC framework developed by Google that lets you build well structured, easily testable, and maintainable front-end applications.
And Why Should I Use It?
  • The framework consists of a tightly coupled toolset that will help you build well structured, rich client-side applications in a modular fashion—with less code and more flexibility.
  • AngularJS extends HTML by providing directives that add functionality to your mark-up and allow you to create powerful dynamic templates. You can also create your own directives, using reusable components that fill your needs and abstracting away all the DOM manipulation logic.
  • It also implements two-way data binding, connecting your HTML (views) to your JavaScript objects (models) seamlessly. In simple terms, this means that any update on your model will be immediately reflected in your view without the need for any DOM manipulation or event handling (e.g., with jQuery).
  • Angular provides services on top of XHR that dramatically simplify your code and allow you to abstract API calls into reusable services. With that, you can move your model and business logic to the front end and build back end agnostic web apps.
Finally, We love Angular because of its flexibility regarding server communication. Like most JavaScript MVC frameworks, it lets you work with any server-side technology as long as it can serve your app through a RESTful web API. But Angular also provides services on XHR that dramatically simplify your code and allow you to abstract API calls into reusable services. As a result, you can move your model and business logic to the front-end.
We have been learning and using AngularJs from the past couple of months and the journey has been a little bit of emotional roller coaster.
 
Reference:- http://www.bennadel.com/
So, Where Do We Begin?
We thought a lot where to use angular in naukri for a real time example and after weeks of thinking/research we came up with a decision to why not start with the most visited page of naukri – SRP page.
We used all the features which angular provide in our POC extensively such as:-
  1. Templates (at client side)
  2. Routing
  3. Two way data binding
  4. Filters
  5. Build in and Custom directives
  6. MVC
  7. Dependency Injection
We completed the full development of the srp page with-in 1 month.

Outcomes?

While development we encountered few roadblocks such as-
  1. Large number of http requests – as the application in angularJs is developed in small modules (views, controllers, services etc)- getting all these resources from server led to increase in number of hits to the server.
Solution – We used grunt for concatenation of resources which helped in reducing the number of hits.
  1. High load time for the first page – as all the resources required for the angular app is loaded on the first page.
Solution – We used Lazy loading of resources and caching of template to reduce the Load time
  1. AngularJs does not support Internet Explorer version 8 and below.
Solution – Even we decided not to support Internet Explorer 8 and below
  1. Search Engine optimisation
Solution – We used a headless browser at backend to render application to crawler
We got some useful outcomes for the use of angularJs in naukri through this POC which are-
  • Well-structured code (MVC at Front end)
  • Maintainable and easy to debug code
  • Less and reusable code
  • Low development time
  • Low load time
Posted in General