Appychip: angularjs example

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 :

<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 .

Monday, 30 December 2013

Angularjs Simple example

Hello Everyone
 In this tutorial you are going to learn about angularjs with a basic program.
 Angularjs works on SPA framework which means single page application. To run the following
program all you need is to download angular.min.js and save it in the folder which contains 
the following file. Following programs itself explains through comments how angularjs is 
working, It displays a textbox and whatever being entered in the textbox will be displayed 
on the right of the textbox.
 
<!DOCTYPE html>
<html data-ng-app=""> <!-- Here data-ng-app is a directives which tells the
 html new tricks--> 
 <head>
 <title>Learn Angularjs</title>
</head>
<body >
Name : <input type="text" data-ng-model="name"/>{{name}}  <!-- this defines a textbox with variable name - 'name' and {{name}} output the text of the textbox being entered in it by the user. data-ng-model is a directive and {{name}} is a data binding expression -->
<div data-ng-init="names=['ajeet','ankit','bihar','rahul','sunny','chitrank']"> <!-- This div initialises the array 'names'-->
 <br>
 <ul>
  <li ng-repeat="dcmember in names">{{dcmember}}</li> <!-- ng-repeat directives repeats the elements of the array to be listed by the variable dcmember in the array names-->
 </ul>
</div>
<br>
<div data-ng-init="customers=[{name:'ajeet',city : 'Mhow'},{name :'ankit',city : 'Dewas'}]">  <!-- Here customers is an array which consist of name and city of the customer-->
 <input type="text" data-ng-model="nametext">{{nametext}}
  <ul>
   <!--filter will display the result according to the text being entered in the textbox, orderBy will display the list in alphabetical order according to city-->
   <li ng-repeat="cust in customers | filter: nametext | orderBy :  'city'" >{{cust.name}} - {{cust.city}}</li>
  </ul>
</div>
<script type="text/javascript" src="angular.min.js"></script>
</body>
</html>