Blog for web designers

AngularJs

AngularJs is a latest JavaScript framework that was launch in 2012 by Google. AngularJS can be use with both client side and server side programming language. It is very simple to use.

Paste the below AngularJs script line inside the head tag.


<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

It has a variety of feature that enables to make your website to become dynamic. Extending HTMl with ng-directive.

AngularJS HTML elements

<div ng-app="">
    <p>Quantity: <input type="text" ng-model="number"></p>
    <p ng-bind="number"></p>
</div>

AngularJS data binding example

Quanity:

Cart:

Note: It can be used with text as well. It is just to show you an example.

  • Defining ng-app as the attribute inside the div, it tells the angular js that its the owner of this app.
  • ng-model is binding the value into a variable whereas,
  • ng-bind is getting the value of the variable.

Expression of AngularJS

AngularJS allows you to concatenate string, evaluate equations and more those are inside the double curly braces. {{ }}

For eg:-

Demo: AngularJS evaluating equation.


<div ng-app="">
    <p>Equation result is: {{ 1 + 1 }}</p>
</div>

Output: Equation result is: 2

Santosh Shah

My name is Santosh Shah and blogs at santosh-shah.com


Reader Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.