What is AngularJS, Basics with sample example program

AngularJs is a JavaScript Framework and it is free and open source. It was developed by Misko Hevery and Adam Abrons in 2009 and now maintained by Google. It provides additional HTML attributes and makes the work easier for the user. AngulaJs is Apache 2.0 licensed.

What Is AngularJS?

With reference to the AngularJS documentation, AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.

Features of AngularJS:

The Important features of AngularJs are,

  • Data-binding
  • Services
  • Controller
  • Scope
  • Filters
  • Directives
  • Model View Controller (MVC)
  • Templates

Components of AngularJS:

  • ng-app
  • ng-model
  • ng-bind

Program with Demo:

The sample program prints the text in the title which are typed inside the text box. Ng-model is a directive which binds the html data and is used for binding the view into model.

Demo:

Please type.. {{modelTitle}}

AngularJS integration with HTML

The start of the AngularJS is defined by ng-app.

The directive ng-model can create a model variable. Here the variable name is "modelTitle". This variable can be used in the html page.

The model name can be used with the ng-bind to listen the input at the nd-model.

Example:

<!doctype html>
<html ng-app>   
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
   </head>   
   <body>
      <div class=”main”>
         <label>Entered text will shown below:</label>
         <input type = "text" ng-model = "modelTitle" placeholder = "Enter the text here...">      
         <h3>Please type.. {{modelTitle}}</h3>
      </div>      
   </body>
</html>
Category: