Post
Ask Question

Getting Started With AngularJS

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?
 
There are two options of using AngularJS, 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.

    Example
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <title></title>  
    5.     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
    6.   
    7. </head>  
    8. <body>  
    9.   
    10. </body>  
    11. </html>  
  2. Download AngularJS file and then add in your project.

    We can download AngularJS file from here.
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
  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5.   
  6. <div ng-app="">  
  7. <input type="text" ng-model="name">  
  8.   
  9. <h1>hello Mr.<span ng-bind="name"></span></h1>  
  10.   
  11. </div>  
  12.   
  13. </body>  
  14. </html>  
Output

Output

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
  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5.   
  6. <div ng-app="">  
  7. <input type="text" ng-model="name">  
  8.   
  9. <h1>hello Mr.{{name}}</h1>  
  10.   
  11. </div>  
  12.   
  13. </body>  
  14. </html>  
Output

Output

Some other examples of AngularJS expression are given below:

Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5.   
  6. <div ng-app="">  
  7. <input type="text" ng-model="firstname">  
  8. <input type="text" ng-model="lastname">  
  9.   
  10. <h1>hello Mr.{{firstname+" "+lastname}}</h1>  
  11.   
  12. </div>  
  13.   
  14. </body>  
  15. </html>  
output

Output

We can directly write the mathematical expression into the AngularJS expression. 

Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5.   
  6. <div ng-app="">  
  7. <h1>sum of 5 and 6 is: {{5+6}}</h1>  
  8.   
  9. </div>  
  10.   
  11. </body>  
  12. </html>  
Output

Output
How to change CSS property using AngularJs.

We can also change the CSS property using AngularJS, which is very easy. 
 
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5.   
  6. <div ng-app="">  
  7. <h1 style="color:{{acol}}">welcome c# corner</h1>  
  8. <input ng-model="acol">  
  9.   
  10. </div>  
  11.   
  12. </body>  
  13. </html>  
Output

Output

AngularJS numbers

AngularJS number is used to hold the numbers and for the mathematical operations.
  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5.   
  6. <div ng-app="" ng-init="q=1;c=5">  
  7. <p>Total: <span ng-bind="q * c"></span></p>  
  8. </div>  
  9.   
  10. </body>  
  11. </html>  
Output

Output

AngularJS Strings 

AngularJS Strings are used to store the character value.
 
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5.   
  6. <div ng-app="" ng-init="firstName='Ajay';lastName='Malik'">  
  7.   
  8. <h2>Welcome Mr.{{ firstName + " " + lastName }}</h2>  
  9.   
  10. </div>  
  11.   
  12. </body>  
  13. </html>  
Output

Output

AngularJS Objects

AngularJS Objects are used to store multiple values in a single name.
 
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5.   
  6. <div ng-app="" ng-init="person={firstName:'Ajay',lastName:'Malik'}">  
  7.   
  8. <h3>Hello Mr.{{ person.lastName }}</h3>  
  9.   
  10. </div>  
  11.   
  12. </body>  
  13. </html>  
Output

Output
AngularJS Arrays 

AngularJS arrays are used to store a sequence or multiple values.
 
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5.   
  6. <div ng-app="" ng-init="arr=[10,20,30,40,50]">  
  7.   
  8. <h3> value of Array is: {{arr[3]}}</h3>  
  9.   
  10. </div>  
  11.   
  12. </body>  
  13. </html>  
Output

Output
Next Recommended Reading Load CSS Theme Dynamically on user selection in AngularJS