Post
Ask Question

An Introduction to AngularJS

What is Angular JS?

AngularJS is nothing but a JavaScript framework. We use angular just like any normal javascript in our page. The only difference being we get to do so many things quickly without many hassles which we will be seeing later.

It can be added to an HTML page with a script tag. It is a library written in JavaScript. We can either download the Angular JS files locally on the system and use them in the application or we can take a link from the CDN. It is up to the developer to decide. Usually referring to a CDN link is preferable, as making changes to the code is not recommended.

Use the below link in the head section of the HTML mark up to add Angular JS in your project.

  1. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  
AngularJS extends HTML with ng-directives.

 

  • The ng-app directive defines an AngularJS application.
  • The ng-model directive binds the value of HTML controls to application data.
  • The ng-bind directive binds application data to the HTML view.

Write the following markup in a webpage.

  1. <!doctype html>  
  2. <html ng-app>  
  3.   
  4. <head>  
  5.     <title>My Angular App</title>  
  6.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  
  7. </head>  
  8.   
  9. <body> {{3+3}} </body>  
  10.   
  11. </html>  
We use {{ }} brackets in Angular JS to perform operations. In the above example we have specified addition of two numbers. Let us see the output now.

intro
            Angular JS intro

Note:

While referring to CDN links make sure the internet connection is On. Otherwise the code will not work. In such scenarios it is advisable to download the files locally.