Angularjs Web Development

AngularJS Web Development

One-way data binding diagram
  • li ng-repeat="tasks in tasks">


Here, the directive ng-controller defines a namespace, where you can place your Angular JS for controlling the data and evaluating the expressions in your HTML. While the ng-repeat directive is an Angular repeater object, which asks Angular to create list elements as long as you've tasks to display.

While most of the frameworks today are just a bundle of existing tools, AngularJS is a next generation framework, having some very compelling features that are helpful not only for developers, but also equally useful for designers. Following are some incredible features of AngularJS, which will help developers make their future web applications awesome...


Directives are one of the most powerful and compelling features of AngularJS. They allow you to extend your HTML and are used by AngularJS to plug its action into the page. They allow you to specify custom and reusable HTML tags, which can be used to manipulate DOM attributes and moderate the behaviour of specific elements. All of the Directives are prefaced with ng-, designed to be standalone elements separate from your MVC application, and placed in HTML attributes.

Some of the notable AngularJS directives are:

  • ng-app: This directive tells Angular where to get activate. To define a page as an Angular application, you need to use a simple code: .
  • ng-bind: This directive tells Angular to change the text content of an HTML element with the given expression's value, and to update the text as the value of that expression alters.
  • ng-model: It is very similar to ng-bind, but binds the view into the model, which other directives like select, textarea, or input require.
  • ng-class: Allows dynamic loading of class attributes.
  • ng-controller: This directive lets you specify a JavaScript controller class for evaluating HTML expressions.
  • ng-repeat: It effortlessly loops through an item, to which the given loop variable is set, in a collection.
  • ng-hide and ng-show: Using the value of a Boolean expression, this directive decides whether the element will be displayed or not.
  • ngIf: It is basic if statement directive that allows to re-insert a clone of the compiled element into the DOM, if the conditions are true. If the condition is false, then it removes the element from the DOM.

angularjs homepageFollowing is an example of a directive that listens an event and updates its $scope, consequentially.

  1. myModule.directive('myComponent', function(mySharedService) {
  2. return {
  3. restrict: 'E',
  4. controller: function($scope, $attrs, mySharedService) {
  5. $scope.$on('handleBroadcast', function {
  6. $scope.message = 'Directive: ' + mySharedService.message;
  7. });
  8. },
  9. replace: true,
  10. template: ''
  11. };

This custom directive can be used as following:

Two-way data binding

Data-binding is probably the most dominant and notable feature of AngularJS. It saves developers from writing a considerable amount of code by reducing much of the burden on the server backend. In a typical web application, 80% of the code base is dedicated to manipulating, traversing, and listening to the DOM. Data-binding makes this code invisible, so you can focus on other important things of your application.

Traditionally, most of the templating systems have one-way data binding: they merge model and template components together into a view. After the merging, changes to the model are not automatically reflected in the view. To reflect these changes, the developer needs to manually manipulate the DOM elements and attributes. This process gets more complicated and cumbersome, when a user makes any changes to the view. Because the developer then needs to interpret the interactions, merge them into the model, and update the view.

Image courtesy of

In contrast, AngularJS do the data-binding in a better and different way by handling the synchronization of data between the model and the DOM, and vice versa.

Image courtesy of

Following is a simple example, explaining the binding of an input value to an


  1. script src=" ">
  2. h1Hello, {{yourName}}!
  3. input ng-model="foo" value="bar">
  4. script src="angular.js">
An Introduction to AngularJS for the Python Web Developer
An Introduction to AngularJS for the Python Web Developer
Web Development with AngularJS and Bootstrap Part 18
Web Development with AngularJS and Bootstrap Part 18
Introduction to AngularJS - Web Development
Introduction to AngularJS - Web Development
Share this Post

Related posts

Choosing BI Solution: Tibco Spotfire or Tableau?

Choosing BI Solution: Tibco Spotfire or Tableau?

APRIL 23, 2018

Recently Business Intelligence (BI) is gaining increasing importance among successful companies. Business Intelligence allows…

Read More
Java Web development

Java Web development

APRIL 23, 2018

Every time yet another Java team pisses me off, I blow off steam by looking up questions like this one. Let me reiterate…

Read More