learn angularjs with step by step tutorial
Contents
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.
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
Anguler JS Tutorial .
Here given some example of Angular js
Two Number Multiplication
{{number_one * number_two}}
{{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}}
-
{{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
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.
Pingback: learn angular js | Introduction of angular js
Thank you for sharing this great post.