by Dinesh Thakur Category: AngularJS Tutorial

In this tutorial, I'll build your first AngularJS app. The tutorial describes what you need to know before moving further.

1. The ng-app directive initializes and links an AngularJS application to HTML. This directive also tells AngularJS that the <div> element is the "owner" of the AngularJS application.
2. The ng-model directive binds the values of AngularJS application data to HTML input controls.
3. The ng-bind directive binds the AngularJS Application data to HTML tags.

To create a first AngularJS application that asks users their annual income and the percentage they want to spend to buying mobile. There should be annual income and percentage input text fields. As soon as the value of any input text field changes the result is updated.

<!doctype html>
<html lang="en" ng-app>
       <title>My First AngularJS App</title>
       <script src=""></script>
       <body ng-init="income=0;per=0">
          Your Annual income?
           <input type="text" ng-model="income">
           <br/>How much should you invest for buying mobile?
           <input type="text" ng-model="per">%
           <br/>The amount to be spent to buying mobile:{{income*per*0.01}}

About Dinesh Thakur

Dinesh ThakurDinesh Thakur holds an B.C.A, MCSE, MCDBA, CCNA, CCNP, A+, SCJP certifications. Dinesh authors the hugely popular blog. Where he writes how-to guides around Computer fundamental , computer software, Computer programming, and web apps. For any type of query or something that you think is missing, please feel free to Contact us.