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
In this basic Tutorial you will learn how to add AngularJS and how to use it.
But before that you must have basic knowledge of:
- HTML
- Javascript
- CSS
AngularJS is a JavaScript Framework
AngularJS is a JavaScript framework. It is a library written in JavaScript.
AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js
AngularJS Extends HTML
AngularJS extends HTML with ng-directives.
The ng-app directive defines an AngularJS application.
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
The ng-bind directive binds application data to the HTML view.
Variable syntax:
Example: {{ Name }} or {{ Age }}
AngularJS Examples
Simple Hello World:
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <body> <div ng-app="" ng-init="echo='Hello World'"> <p ng-bind="echo"></p> </div> </body> </html>
Simple Calculation:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="">
<p>Sum: {{ 1 + 2 }}</p>
<p>Multiplication: {{ 2 * 10 }}</p>
<p>Division: {{ 10 / 2 }}</p>
<p>Subtract: {{ 10 - 2 }}</p>
</div>
</body>
</html>
Dynamic text binding:
<!DOCTYPE html>
<html>
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="myname" placeholder="Type Your name"></p>
<p>Hi {{myname}}</p>
</div>
</body>
</html>
AngularJS filter example using JSON.