AngularJS is a structural framework for dynamic web apps. AngularJS extends HTML with new attributes.
AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag.
AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions
AngularJS is perfect for Single Page Applications (SPAs).
It is a library written in JavaScript and can be added to a web page with a script tag:
AngularJS Example :
<h3>Name: <input type="text" ng-model="name"></h3>
<h2 ng-bind="name"></h2>
</div>
</body>
</html>
The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS 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.
It is a library written in JavaScript and can be added to a web page with a script tag:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
Let's take a look basic example so you will come to know how AngularJS directives or attributes which are adding with HTML.
AngularJS Example :
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app=""> <h3>Name: <input type="text" ng-model="name"></h3>
<h2 ng-bind="name"></h2>
</div>
</body>
</html>
Check example output here : Test Page Here
AngularJS starts automatically when the web page has loaded.
The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS 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.
SPA : Angular is very famous for Single Page Application due to this binding benefit and with AJAX call we can bring data from server using web api or other call mechanism and those modules attributes updates in javascript file and changes to UI automatically reflects.
We will learn more for AngularJS in my next post. Thank You !
No comments:
Post a Comment