Understand Angular JS Step by Step


Angular JS From Scratch with examples for Beginners. This article has step-by-step examples ,and has the basic knowledge for who's, which is new to angular. This Article covers All the Follwing Points : What is AngularJS?,Use AngularJs In your application?, All About AngularJS Expression,AngularJS numbers, Strings,.AngularJS Objects,AngularJS Arrays.

The status of this resource is Pending and require some modification by the author.

This is useful for those who is new in angular js, It covers these points.</br>
1.What is AngularJS? .</br>
2.How to use AngularJs In our application?.</br>
3.What is AngularJS Expression?.</br>
4.AngularJS numbers.</br>
5.AngularJS Strings .</br>
6.AngularJS Objects.</br>
7.AngularJS Arrays.</br>

There are two way of using AngularJS in your application, listed below.
1.We can use cdn link to add AngularJs into our project.
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
This link is directly written in the head section of our HTML document.
or
2.Download AngularJS file and then add in your project.

What is AngularJS?
AngularJS is a JavaScript framework, which is used to add the functionally into our HTML single page Application.
AngularJS is developed by Google and the first version was launched in 2012.
AngularJS is very easy to implement.
Using AngularJS, we can create responsive webpages.
How to use AngularJs In our application?

Example
 
Add this script to head section of your html page :

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

AngularJS ng-directives

ng-app : This directive is used to define Angular JS applications.
ng-model :This directive is used to bind the value of HTML controls to the Application data.
ng-bind :This directive binds the Application data to HTML view.

Example

Add this script to head section of your html page :

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

And add this code inside body section of your html page :


input type="text" ng-model="name">

Hi, Mr. span ng-bind="name">




What is AngularJS Expression?
AngularJS expression is used to bind the Application data.
Expression behaves the same as ng-bind.
AngularJS Expression is written in the double braces {{expression}}

Example

Add this script to head section of your html page :

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

And add this code inside body section of your html page :



Hi, Mr.{{name}}





AngularJS numbers

AngularJS number is used to hold the numbers and for the mathematical operations.
Example
 
Add this script to head section of your html page :

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

And add this code inside body section of your html page :


Total: span ng-bind="q * c">




AngularJS Strings
AngularJS Strings are used to store the character value.

Example

Add this script to head section of your html page :

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

And add this code inside body section of your html page :


Welcome Mr.{{ firstName + " " + lastName }}





AngularJS Objects

AngularJS Objects are used to store multiple values in a single name.

Example
  
Add this script to head section of your html page :

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

And add this code inside body section of your html page :


Hello Mr.{{ person.lastName }}





AngularJS Arrays :

AngularJS arrays are used to store a sequence or multiple values.

Example

Add this script to head section of your html page :

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

And add this code inside body section of your html page :


value of Array is: {{arr[3]}}



Comments

No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: