Title
Angular JS Overview
Introduction
Angular JS is a very powerful JavaScript library or we can say open-source web application framework maintained by Google. It is used in Single Page Application (SPA) projects. It extends HTML DOM with additional attribute (i.e. directives) and binds data to HTML with expressions hence making it more responsive to user actions.
It is licensed under Apache version2.0
Prerequisites
One should have a basic understanding of JavaScript and any text editor (I’ll be using Visual Studio 2015). As we are going to develop web based applications using Angular JS, knowing HTML, CSS, and AJAX will be a plus point.
Let’s consider below example
<!-- Angular JS Example --> <div ng-app=""> <p> <b>Name:</b> <input type="text" ng-model="name" /> </p> <h2 ng-bind="name"> </h2> </div>
Angular JS extends HTML with ng-directives.
- The ng-app directive defines an Angular JS application
- The ng-model directive binds the value of HTML controls (input, select, and text area) to application data.
- The ng-bind directive binds application data to the HTML view.
Complete Code:
</pre> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Angular JS 1</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> </head> <body> <!-- Angular JS Example --> <div ng-app=""> <p> <b>Name:</b> <input type="text" ng-model="name" /> </p> <h2 ng-bind="name"> </h2> </div> </body> </html> <pre>
Example Explained:
Angular JS starts automatically when webpage has loaded.
- The ng-app directive tells Angular JS that the <div> element is the “owner” of an Angular JS application.
- The ng-model directive binds the value of the input field to the application variable name.
- The ng-bind directive binds the innerHTML of the <h2> element to the application variable name.
OUTPUT
Note: You can use data-ng-, instead of ng-, if you want to make your page HTML 5 valid.
You’ll get more to know about Angular JS in upcoming article. Keep visiting.
HAPPY CODING.
