AngularJS: A New Way to Develop Web Apps

Rahul Sah

As a developer, you must have noticed while developing web apps that it becomes increasingly tedious and error prone to keep the view in sync with the data model. Also, if there are AJAX driven elements then coding the views is a tough task. While most of the processing takes place at the server side, most of the complexity of web development frameworks lies in the views. Even though there are libraries available to make life easier, it is still a pain to build web apps for the client side. Browsers being smart and powerful enough today to compile and render the views as we intend them to, we can use JavaScript code to deduce rules and formatting while the server only provides the authentication and JSON data. This way, the client does most of the work. AngularJS lets you achieve that.

What is AngularJS?

This HTML compiler makes it easier to control the rendering and styling of data and layout as per the JavaScript code and CSS rules. This way of rendering data into intermediate view forms on client means that the servers are spared from doing that. AngularJS comes with autobinding and built-in validators and formatters, which take care of the extra JavaScript code that had to be written to handle event listeners, DOM updates, form updates and input validators. Thus, this allows the developer to write lesser code and focus more on what his web app does rather than coding for web browser. Using AngularJS, you can now present the raw JSON data to user in presentable format.

To start off with AngularJS, you do not need to download, compile or configure anything. AngularJS applications are specified declaratively through custom HTML tags and attributes that convey the intent of application. These UI templates and widgets in HTML run on the client side and you do not have to wait for the server to make the changes. So, all you need to know is HTML and CSS, and as AngularJS applications follows the MVC pattern, you just need to define the logic of application using AngularJS controllers. You can even extend those to add new behaviors, widgets, etc.

2-way Data binding.
In the MVC paradigm, it is tedious to keep the view and model in sync always. Typically, in the initial rendering of the page, the presentation template and the data model is merged to create the view. What if the model changes you have to remerge it with the template and reproduce the view. What if the user has changed the view in the meantime, so how to get the data back from the page into the model. For this, we have to keep the model and view binded together tightly. AngularJS comes with this autobinding capability.
What AngularJS does is two-way data binding, it binds the view and model tightly. If user changes the view the model updates, and when data in model updates it reflects in the view. The template is compiled to create a view, and the view and model are tightly interlinked. So, if the JavaScript changes data in the model or user changes something in the view, it is reflected on the either side, i.e. the model updates if the user changes the view and the view automatically gets updates when the JavaScript changes the model. This is a continuous process. Therefore, the model becomes the single source of truth for the application, you never have to parse the data out of HTML, the developer is free of the worry that if the user changes something his model isn't stale as the model is always the source of truth for his application state and the view is simply a projection of the model.
This autobinding feature can be demonstrated with following example code:








Your name:

When you save the code in HTML file and open it in browser, you see a textfield with Guest written in that and a greeting 'Hello Guest!'. The concept of databinding can be witnessed here, as you type a new name in the textfield, the changes in the textfield start getting reflected in the greeting text. The other things to notice in the code is how the script tag bootstraps the AngularJS environment using the angular-debug.js file. While the ng:autobind attribute tells AngularJS to compile and manage the whole HTML document. The compilation starts in the onLoad handler and you do not have to explicitly add an onLoad event since autobind mode takes care of that.

Writing Less Code
The form value validation is an important but at times tedious as the form values could be subjected to meet certain validation criteria. Also you'll have to write the event listeners to trigger a specific function or do a DOM update. What if you are provided with most of such validation or formatting code beforehand, it would make the life much easier. Since, AngularJS comes with built-in validators and formatters, you do not have to do so much of scripting code and just use the pre-defined library of validators or formatters. You can even extend that and add new behavior attributes to the library. You aren't writing any new code, the code is actually written for it. You're just using it again. The library is present for that, you can even extend that and add new declarations to it.
To demonstrate a simple validator example, we have a text field labeled Name which cannot be left blank and another input field labeled Number which accepts a 10-digit number only. Just using the ng:required and ng:validate eliminates our task of writing the validation by us. The following code snippet shows that:










Demo Form Validation

user={{user}}