Single Page Application – Angular JS

We use AJAX for updating content on our web page so it does not refresh entire page. A single HTTP request communicate with server and we get our result which are fast and fluid. However, it is not the same as we used to get in desktop application. In order to achieve similar experience as Desktop application, we can take an approach of developing Single Page Application – SPA.

A web application or web site that fits on a single web page with the goal of providing better fluid user experience like desktop application. List of popular frameworks for developing SPA

• • Angular
  • Backbone
  • Knockout
  • Ember

Comparison of frameworks

World Top most web products in SPA are Gmail, Twitter, Facebook, Photoshop.com etc.

If you are:

Customer expectations from UX are increasing day by day. My Customers need fast and fluid product. For example, Orkut and Facebook come with same social media product but Orkut fail. Due to old school user experience. This could be a high level risk for your product. To resolve that kind of risk you need to migrate your product to latest user experience or current trends.

Technologies never stays the same. They change day by day. If we stick with any technology then it will be a higher risk. It can help us in present but we also have to think about the future. Adopting latest technologies will keep us ahead of the game. For example, Developers are using AJAX more and more every day. Because of AJAX have quicker interaction between user and website since pages are not reloaded for content to be displayed. This activity can be simplified, since the loading times can be reduced from websites.

I don’t have time to reload page and wait till server roundtrip. I need everything on one page. For Example, I don’t like Rediff e-mail, I like Gmail. Both are same product but Gmail is better than rediff mail. Why? I don’t need to wait that much. Everything is on one page with fluid experience.

There are too many framework available on web to build SPA. One of the known framework is AngularJS. I am going to give some introduction about AngularJS.

AngularJs is an open source web application framework maintained by Google and community and assist developers in creating single page applications. Its goal is to augment web applications with model-view-controller (MVC) capability in an effort to make development and testing easier. It’s very easy to moving for javascript developer.

Benefits of AngularJS

• Two way data binding
• Templates
• Full testing environment
• Server Communication
• Deep-Linking
• De-couple client side and server side
• MVC
• Easy to adopt for UI developer
• Strong Community

Module: A model includes primitive type such as number, string, Boolean or object. A model is just javascript object. A Model contains business logic and application data.

View: View contains Document Object Model, In Simple way it hold user interface. Add angular expression in our view for display the data from controller and that expression binds from model inside our controller. Angular is two-way data binding. Data-binding is an automatic way of updating the view whenever the model changes, as well as updating the model whenever the view changes. This is awesome because it eliminates DOM manipulation from the list of things you have to worry about.

Controller: Controllers are the behavior behind the Document Object Model elements. Angular lets you express the behavior in a clean readable form without the usual boilerplate of updating the DOM, registering callbacks or watching model changes.

Let’s do small exercise. AngularJs provides two directives – one is ng-route and second is ng-view. We can develop our SPA by using that both.

ngRoute module provides routing and deep linking services and directives for angular apps. It manage routing of web application. Once we click on any anchor link it will redirect to other page. But now ngRoute will now stop redirecting and handling those routes.

ngView is a directive that complements the $route service by including the rendered template of the current route into the web page. Every time the current route changes, the included view changes with it according to the configuration of the $route service.

Find Example on: https://github.com/knowarth-technologies/spa-examples