When developing web applications HTML is the main markup language irrespective of other web development technologies such as ASP.NET .HTML is a declarative language designed for describing the documents which can be rendered by a browser.
The web applications of today are much more than a group of static documents.Today the web applications are completely dynamic ,this means that the UI needs to be updated immediately in response to the user actions.In contrast HTML is designed for displaying static documents.
This difference between HTML and the web applications of today is also because of the latest changes in web development technologies.HTML’s main objective is displaying static documents ,its not suitable for developing rich UI applications in which client is expected to provide more fluid user experience.
This difference between rich User Interface and HTML leads to the developer manipulating the DOM programmatically. So for creating a rich user interface developer needs to perform the following tasks ,whenever user interacts with our application
- Make an ajax call to the server
- Format the return data if required in the required format
- Manipulate the HTML DOM to render the returned data.
These are the common tasks which needs to be performed again and again in any rich UI application.So instead of performing these tasks manually wouldn’t it be nice if we can use a framework these tasks ? This is where frameworks such as AngularJS are used.
AngularJS is a javascript framework for creating web applications which provides a rich user interface similar to a desktop application.These types of applications are known as Single Page Applications.
In a SPA application the web page is never reloaded. In the initial request the HTML,javascript and other client resources are sent in the request. As the user interacts with the application data fetched is from the server ,this client server interaction happens asynchronously behind the scenes.Because of this it provides a user experience similar to a desktop application.
In a SPA application all the required HTML,javascript and the CSS are loaded on the first page load and a request is made to the server only for fetching the necessary resources such as the data.As the user interacts with a single page rather than different pages hence it is called Single Page Application.
As most of the application logic is moved from the server to the client ,client side frameworks such as AngularJS have an important role in SPA applications.
AngularJS applications are structured using the MVC pattern,application is structured into Mode,View and the Controller.
Model Model is typically a javascript object and is populated by retrieving values from the server.If our model grows in complexity we can create model using factories so that the task of creating model object is separated from the controller.If we have a simple model object we can directly define the model object using javascript in controller.The data for the model object is typically retrieved from the web server.
To bind the input element in the view to our model we can use the ng-model directive on the element e.g ng-mode=”model name”
View View is just a HTML template which renders the model. Views in AngularJS are created by extending the HTML with directives. AngularJS directives are just HTML attributes with prefix ng- .These directives gives special instructions to the angular application about processing the HTML elements.
Some of the commonly used directives in angular are
- ngApp Defines the scope of the angular application
- ngController A controller object is created using the controller function .In the controller function we set the state and behaviour of $scope.
- ngBind This directive is used set the text content of the HTML element with the value of the ng-Bind expression
- ngModel Binds the property of $scope to the HTML element
- ng-Repeat Creates a template for each item in a collection.We can use ng-Repeat as
<div ng-repeat=”item in Collection”>
<div>item</div>
</div>
Controller Controller is the component which binds the model to the view.Controller is AnguarJS has two impoartant uses
- Sets the Model for the view
- Contains the business logic
It’s a function which is automatically passed a $scope parameter.$scope parameter sets the model for the view.View can access this $scope object to render the model.
If our model grows in complexity we can create model using factories so that the task of creating model object is separated from the controller.If we have a simple model object we can directly define the model object using java script in controller.The data for the model object is typically retrieved from the web server.
To bind the input element to our model we can use the ng-model directive on the element as ng-mode=”model name”
Model binding in Angularjs is two way ,the changes in UI are automatically updated in the view and when the user updates the view changes are reflected in the model.This is a big benefit since we don’t need to sync the data between the model and the view. Data binding expressions have the syntax as {{expression}} and we can insert the expression in html wherever we want to display the value of the model data.
In the following example we are consuming the model data using both the data binding {{expression}} and the ng-model directive
<body ng-app >
<form name="myForm" ng-controller="employeeController">
<span> <b>Employee Details</b></span>
<table>
<tr> <td>Id: {{Id}}</td> <tr>
<tr> <td>Name: {{EmployeeName}}</td> <tr>
<tr> <td>Address: {{Address}}</td> <tr>
<tr> <td> EmpoymentType<input ng-model="EmpoymentType"></input> </td> <tr>
</table>
</form>
</body>
We can define a controller as a function.The controller function is passed a $scope object explicitly.To set the model values for the view defined above we can use the following controller function.To begin using AngularJS library we just need to reference the angular.min.js file.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
function employeeController($scope) {
$scope.Id = "1";
$scope.EmployeeName = "SuperUser";
$scope.Address = "Address1";
$scope.EmpoymentType = "Permanent";
}
</script>
If we run the above application we get the following page
AngularJS has become quite popular in the last few years as a framework for developing Single Page Applications.There are other popular frameworks for developing Single Page applications such as DurandalJS ,Ember.js. Advantage of AngularJS is that we can use our existing knowledge of HTML and use directives to extend it instead of learning a totally new syntax.Directives are just HTML attributes which we apply to different HTML elements.
Using AngularJS in our web applications provides better user experience as the UI can be updated without making a round trip to the server.
