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>
<head>
<title>My First AngularJS App</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></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}}
</body>
</html>
Dinesh Thakur holds an B.C.A, MCDBA, MCSD certifications. Dinesh authors the hugely popular