Introduction to Binding in AngularJS

This post is my first milestone to share my knowledge about AngularJS. AngularJS is powerful framework to enhance your website or even for creating SPA (Single Page Application). The basic idea of SPA is to create web more like desktop app, make it faster, fluid and no page refresh for every page transition.

I'll cover more about AngularJS and SPA in next articles. Let's continue talking about introduction to binding in AngularJS.

Pre-requisites

The first step to do is to add AngularJS into our website. Here is how to enable AngularJS in your website:

Download AngularJS script file or use CDN => https://angularjs.org
Add ng-app directive. The purpose is to tell AngularJS that our web is angular app.

You probably ask what directive is. In AngularJS, directive can act as component or attribute. In our case of ng-app, I often add it in html tag or body tag like below

<html ng-app>

<body ng-app>

And the full html page will look like below. I add ng-app and angularJS script from cdn

<!DOCTYPE html ng-app> 
  <head> 
    <title>First AngularJS App</title> 
  </head> 
  <body> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular min.js"></script> 
  </body> 
</html>

Getting Started

Our next step is to understand the binding in AngularJS. Let's start by adding model using directive and the data binding expression syntax ****

... 
Client Name: <input type="text" ng-model="client.name"> <h1>Hello

In the code above, ng-model is directive like ng-app. There is also data binding expression, noted with syntax **** to print out whatever user type in the input using.

It is the best practice to use dot expression for every ng-model name

<!DOCTYPE html ng-app> 
  <head> 
    <title>First AngularJS App</title> 
  </head> 
  <body> 
    Client Name: <input type="text" ng-model="client.name"> 
    <h1>Hello  
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script> 
  </body> 
</html>

See the working code here. The coolest thing is we don't add any javascript code. All the manipulation is done by AngularJS. It is very cool, isn't it?