Introduction

There are numerous front end javascript frameworks, angularjs, react, backbone, and todomvc etc. Here, I choose to use Angular.js and test some interesting features. The functionalities of Angular js include filtering repeaters, two-way data binding, dependancy injection, template, routing, and service.
Directies are markers on a DOM element, such as an attribute, or element name, that attaches behaviors to the DOM element. Several build-in directives in Angular js are ngBind, ngDisable, ngClick, ngShow, and ngModel.

Demonstration

ng-bind

ngBind may bind the content of a HTML element with value of a given expression and update the value as the value of the expression changes. Here, I bind the name and nickname in the following sentence with the input text field.

Name:

Nickname:

My name is and my nickname is

ng-disable

ngDisabled sets the disabled attribute on the element as the expression inside ngDisabled is true. Here, I bind the expression Switch on the toggle checkbox. The button would be disabled as the checkbox is checked.

Toggle

ng-click

ngClick would evaluate the expression upon tap. This directive would be deprecated beginning with Angular 1.5. Click on the button and there's a scope variable incrementation.

form validation

Inputs of type email must have a value in the form of username@domainname. If the email is blank, a message of required email would be shown. If the format of the email isn't username@domainname, a message of invalid email would be shown.

Email:
Email is required. Invalid email address.

Angular js setup

To start using Angular js, choose a version on the content deliver network of google or download to your local machine. In the script tag, put the corresponding url or path in the src attribute. 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
In the following script, declare a application variable from angular module and name the the application as myApp. The empty brackets indicate that there's no extra module to load. The controller is then declared with a name of validateCtrl and a constructor function. a new child scope will be created and made avaliable as an injectable parameter to the constructor function as $scope. Here, I set ip the initial state of a $scope object and attach a property called email.
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.email = '';
});
</script>

Controller code

Surround the block that would use the Angular js with the div declaring ngApp then the Angular js would compile the expressions and directives.
<div ng-app="myApp" ng-init="name='name';nickname='nickname';Switch=true;count=0">
</div>

ngBind

Bind the input text field with name and nickname using ngModel.
<p>Name: <input type="text" ng-model="name"></p>
<p>Nickname: <input type="text" ng-model="nickname"></p>
<p>My name is <span ng-bind="name"></span> and my nickname is <span ng-bind="nickname"></span></p>

bgDisabled

Bind the checkbox with Switch using ngModel. And assign Switch as the expression in ngDisabled. 
<p>
<button ng-disabled="Switch">Toggle button</button>
</p>
<p>
<input type="checkbox" ng-model="Switch">Toggle
</p>

ngClick

The increment expression on the count variable would be executed once every time the button has been tabbed.
<div>
<button ng-click="count = count + 1">Click me!</button>
<p><span ng-bind="count"></span></p>
</div>

form validation

The novalidate attribute indicates that the form is not to be validated on submit. Instead, use the validation function of Angular and disable the submit button as the email field is empty or error invalidate in format.
<form name="myForm" ng-controller="validateCtrl" novalidate>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit" ng-disabled="myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>

Conclusion

Here, I only demonstrate a little part of Angular js. To fully explorer the power of Angular js, please visit the official website. As it's now transferring from Angular 1 to Angular 2, there might be many changes and other front-end may be good choices,too.

History

First revision: add description - 2016/02/03

Reference

  1. Front-end javascrpt framework
  2. Angular js github
  3. Angular js
  4. Angualr js CDN
  5. Understanding Controllers
  6. HTML novalidate