learn angularjs with step by step tutorial

In our previous blog we have shown the brief description regarding Angular JS.. Now In angular js tutorial we will see some angular example with the help of its components.

Angular expressions are JavaScript-like code snippets that are mainly placed in interpolation bindings such as {{ textBinding}}, but also used directly in directive attributes such as ng-click="functionExpression()".

AngularJS expressions can be written inside double braces: {{ expression}}.

Example :

AlphansoTech Tutorial Guide

 	
My first expression: {{ 7 + 15}}

The ng-app directive defines an AngularJS application.

If you remove ng-app , it will show as it is, in place of 22.

Directives are markers on a DOM element. Such as (such as an attribute, element name, comment or CSS class)

AngularJS directives are extended HTML attributes with the prefix ng-.

There are many directives in angular js with different different purposes. Few of them are given below.

• The ng-app directive designates the root element of the application and is typically placed near the root element of the page – e.g. on theortags.In short it directive initializes an AngularJS application.
• The ng-init directive initializes application data.
• The ng-repeat directive instantiates a template once per item from a collection.
• The ng-show directive shows or hides the given HTML element based on the expression provided to the ngShow attribute.
• The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
• Read more about Angular JS Directives

Here given some example of Angular js

Two Number Multiplication

    
Enter Number 
        Enter Number 

        {{number_one * number_two}}
    
    

In above tutorial, we bind the value of HTML input control using directive ng-model to application data.And then use them by expression as shown in tutorial.ng-init set default value for certain ng-model here.

Similarly,We can make addition,subtraction,division or any kind of mathematical operation with multiple numbers.

Dynamic number table Generator

      

            
            

                

                    
{{at_number}} x {{point}} = {{at_number * point}}
                
            
        
    

Click To Download Android App For Number Table

In above tutorial ,We have created an array named points using ng-init which contains 1 to 10 numeric value.

ng-repeat works just like a loop.It repeats all the DOM element based on given array or object.

Angular packs a lot of interesting functionality for doing dynamic form validation.

It offers client-side form validation.

Here given some basic know how of angular js validation and example

    

        

        

            Enter Valid Email
            
            The Email is Not valid.
        
        
    
    

Angular js has great library of Form validation.That we will see in our next blog.

In our next blog we will introduce you about MVC programming in Angular js,Kindly visit our blogs regularly.

Introduction of Angular JS