Post
Ask Question

Introduction To AngularJS

AngularJS is a JavaScript framework for web pages. This is perfect for single-page applications. It works with HTML by extending the attributes with directives and using expressions.

AngularJS is developed by Google, and this framework is available as a set of Google APIs. The prerequisites of using AngularJS is to add a script reference in HTML page to this JavaScript file. 

A few important keywords to learn about AngularJS, are provided below.

  • Basic- Directives, Expressions, Filters, Modules, and Controllers
  • Advance- Events, DOM, Forms, Input, Validation, Http, and more.

Before you start learning AngularJS, it is important that you have the knowledge of following.

  1. HTML
  2. CSS
  3. JAVASCRIPT

What is its History…?

Once a Google Employee, Misko Hevery, started playing with JavaScript in 2009,  and a new JavaScript based structural framework, AngularJS, was born, which was adopted by Google and launched as a release AngularJS version 1.0 in 2012.

A simple example,

  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.   
  4. <head>  
  5.     <title>AngularJS Test Page</title>  
  6.     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  7. </head>  
  8.   
  9. <body>  
  10.     <div ng-app="">  
  11.         <p> What is your name : <input type="text" ng-model="name"> </p>  
  12.         <h1>Your name is {{name}}</h1>  
  13.     </div>  
  14. </body>  
  15.   
  16. </html>  
Output

Output

Let’s understand the above example.

The best thing about it is that while you are typing into textbox, expression prints the letters on the web page. It looks like you have handled onkeypress event in JavaScript.

More explanations.

 

  1. angular.min.js
    As already described at the top of this article, this is a prerequisite to use AngularJS. We need to provide its reference in the HTML page using <script> block. You can either use live angular.min.js file available in Google API store or you can download and save it on your server and update SRC URL accordingly.

  2. ng-app
    This directive instructs HTML parser that this page will be running under AngularJS framework.

  3. ng-model
    This directive binds HTML input control’s value to application variable ‘name’.

  4. {{…}}
    This is an expression which provides the output based on the given formula.