Basic AngularJS Example, Syntax, calculation

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.

Related Posts