Angular

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
Ebook Download
View all
Learn
View all
Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point
Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Elite

$45

$

. 00

monthly

For Elite members:

  • Bundle E-books
  • Access to all Learn Series
  • Unlimited Apply Jobs