Javascript MV* Frameworks
Over the past few years, particularly with advent of AJAX and need for rich, responsive applications, Javascript is becoming increasingly important in modern web development.We are now having single page applications, where web applications contain only a single web page and rest of the stuff is achieved using Javascript/CSS/HTML templates ,web server only provides data exchanged via AJAX. As the volume of code in Javascript increased we felt the need of making it more maintainable and reusable.There came javascript libraries like Prototype, ExtJS and jQuery.But that was not enough, to make the code structured we needed separation of concerns. In a situation, where we have user interface, application logic & data, the good old MVC pattern (and it’s variants MV*) was a natural choice.
 |
In MVC world,
|
In HTML/Javascript world,
- Model is javascript objects populated from various data sources
- Controller is javascript code handling application logic
- View is Document Object Model or DOM elements rendered by the browser.
Right now there are plethora of Javascript MV* frameworks like Backbone.js, Knockout, AngularJS… to name a few.
AngularJS
AngularJS is an open source javascript MVC framework, supported by Google. They key highlight of this are:
- Declarative programming model for manipulating the DOM and binding data to the UI elements.
- Clean separation of application logic & UI
- Clean separation of server side & client side code
- Improved testability
In these series of posts we explore the different features and capabilities of AngularJS.
The Good Old “Hello, World”
Let’s start with a simple Hello, World application.
The first component, we need to develop is the view which is nothing but a client side template.This template contains HTML and AngularJS directives as HTML attributes.This can be served as a static resource from the web servers.
The template shown below uses the following:
- ng-app – This defines which part of the application will be controlled by AngularJS. In this case,we placed it at <html> tag, so this entire markup will come under the purview of Angular.
- ng-controller – This binds the controller class to the scope. Here, the HelloController bound to the markup at <div> level.
- {{}} placeholder – This is a template placeholder whose values will be replaced as the expression greeting.text is evaluated by Angular.
The controller code present in hellocontroller.js is shown below.
Here, $scope defines the context within expressions like {{greeting.text}} are evaluated.
The object greeting is the model in this case.
Now let’s tweak this code a bit to understand why ng-controller attribute is required to bind the controller to a specific portion of the HTML markup. As shown below, we have two different controllers bound to different portions of the markup.
The output will be,
Now let’s make this a bit more interactive by introducing a input text element. Here the text element is bound to the model or, the object greeting using the ng-model directive.. So whatever changes we make in the textbox, will automatically update the object and displayed in the div tag.
The output will be,
