learn angularjs with step by step tutorial

Last updated on Jul 26, 2016

Milan Sanathara

jQuery / JS


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

Anguler JS Expression .

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 :

The ng-app directive defines an AngularJS application.

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

Anguler JS Directives .

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

Anguler JS Tutorial .

Here given some example of Angular js

Two Number Multiplication

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

Anguler JS Validation.

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

Post by Milan Sanathara

I am iOS Application Developer with an aspiration of learning new technology and creating a bright future in Information Technology.

2 Responses to learn angularjs with step by step tutorial

  1. Pingback: learn angular js | Introduction of angular js

Leave a Reply

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