What is AngularJs?
  • Angularjs is JavaScript framework with is used to add functionally into our html single page application
  • Angularjs is developed by google and first version is launched in 2012.
  • AngularJs is very easy to implement
  • Using AngularJs we can create a responsive webpage.
How to use AngularJs Into our application?

There are two option use AngularJs, they are listed below.
  1. we can used 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 directly write into our head section of html doc!

    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>
    7. </head>
    8. <body>
    10. </body>
    11. </html>
  2. Download Angular Js file and then add into our project.

    we can download Angular Js file from here.
AngularJs ng-directives
  • ng-app : this directive is used to define Angular Js application.
  • ng-model :this directive is used to bind the value of html controls to application data.
  • ng-bind :this directive is binds 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>
  6. <div ng-app="">
  7. <input type="text" ng-model="name">
  9. <h1>hello Mr.<span ng-bind="name"></span></h1>
  11. </div>
  13. </body>
  14. </html>
Output

Output

Angular Js Expression?
  • Angular Js expression is used to bind data application data
  • Expression is behave same as ng-bind
  • Angular Js Expression is written into 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>
  6. <div ng-app="">
  7. <input type="text" ng-model="name">
  9. <h1>hello Mr.{{name}}</h1>
  11. </div>
  13. </body>
  14. </html>
Output

Output

some other example of Angular Js 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>
  6. <div ng-app="">
  7. <input type="text" ng-model="firstname">
  8. <input type="text" ng-model="lastname">
  10. <h1>hello Mr.{{firstname+" "+lastname}}</h1>
  12. </div>
  14. </body>
  15. </html>
output

Output

We can directly write mathematically expression into Angular Js 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>
  6. <div ng-app="">
  7. <h1>sum of 5 and 6 is: {{5+6}}</h1>
  9. </div>
  11. </body>
  12. </html>
Output

Output
How to change Css property using AngularJs.

we can also change css proerty using Angularjs it 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>
  6. <div ng-app="">
  7. <h1 style="color:{{acol}}">welcome c# corner</h1>
  8. <input ng-model="acol">
  10. </div>
  12. </body>
  13. </html>
Output

Output

AngularJs numbers

AngularJs number used to hold numbers and used for mathematically 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>
  6. <div ng-app="" ng-init="q=1;c=5">
  7. <p>Total: <span ng-bind="q * c"></span></p>
  8. </div>
  10. </body>
  11. </html>
Output

Output

AngularJS Strings

AngularJS Strings is used to store 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>
  6. <div ng-app="" ng-init="firstName='Ajay';lastName='Malik'">
  8. <h2>Welcome Mr.{{ firstName + " " + lastName }}</h2>
  10. </div>
  12. </body>
  13. </html>
Output

Output

AngularJS Objects

AngularJS Objects are used to store a multiple value in 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>
  6. <div ng-app="" ng-init="person={firstName:'Ajay',lastName:'Malik'}">
  8. <h3>Hello Mr.{{ person.lastName }}</h3>
  10. </div>
  12. </body>
  13. </html>
Output

Output
AngularJS Arrays

AngularJS Arrays is used to store a sequence or multiple 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>
  6. <div ng-app="" ng-init="arr=[10,20,30,40,50]">
  8. <h3> value of Array is: {{arr[3]}}</h3>
  10. </div>
  12. </body>
  13. </html>
Output

Output