Thursday 3 April 2014

Getting started with Angularjs

Getting started with Angularjs

Angularjs is an awesome javascript library by google. It works on MVW (Model View Whatever) framework. HTML is good to have static documents but it failed to have dynamic views. The AngularJs allows you to do so.
Let us take an example to start with, so that you can have better understanding of angularjs.

First of all download the file angular.min.js 
keep it where you are going to make your other files in which you will include this file.

Now make a file usingDirectives.html where you have kept angular.min.js file.
usingDirectives.html file will contain the following code :



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<html data-ng-app=""> <!--here data-ng-app="" tells that we are using the angular in this file,
you can also use ng-app instead of data-ng-app
This is also known as directives-->
 <head>
  <title>Using Angularjs directives</title>
  
 </head>

 <body>
  Name : 
  <br>
  <input type="text" data-ng-model="name" />  {{ name }}
  <!--Now here in the input field we have used the directive data-ng-model, a model is where the data resides,
  we have given the name of model as "name" which we will use as the variable for data binding.
  Here the variable is placed in {{}} whcih is a data binding expression.
  Whatever we type in the model (textbox) will be binded to the {{name}}. -->
  <script  src="angular.min.js"></script>
 </body>
</html>

Here in this example we have  data-ng-app="" in the html tag which tells that we are using the angular in this file, we can also use ng-app instead of data-ng-app, This is also known as directives.

We have an input field, we have used the directive data-ng-model, a model is where the data resides, we have given the name of model as "name" which we will use as the variable for data binding.
Here the variable is placed in {{}} which is a data binding expression.
What ever we type in the model (textbox) will be binded to the {{name}}
I hope this example is the simplest one to start with, you can also get the same working example from this link .

No comments:

Post a Comment