Hii,
This blog is in continuation with my previous blogs on AngularJs, In this blog i am sharing a simple example in which i have used few AngularJs directives like ng-app, ng-init, ng-model and an AngularJs expression.
1)ng-app directive is used to initialise an AngularJS application.
2) ng-init directive is used to initialise application data.
3) ng-model directive is used to bind any html control's value to an application data.
Example:1 In the example given below an AngularJs expression is used inside which whatever formula is defined will read the input,resolve the expressions and the output will be the calculated value,
Here's the code
<div ng-app="" class="main">
<div style="border-bottom:2px solid #000;" ng-init="principal=1200;rate=15;intrest=2;time=10">
<h1>Calculate Simple Interest</h1>
<p> <label>Principal:</label> <input type="text" ng-model="principal"></p>
<p> <label>Rate:</label> <input type="text" ng-model="rate"></p>
<p> <label>Intrest:</label> <input type="text" ng-model="intrest"></p>
<p> <label>Time:</label> <input type="text" ng-model="time"></p>
<p class="output"><label>SI: </label>{{ principal * rate * intrest / time }}</p>
</div>
<div style="border-bottom:2px solid #000;" ng-init="Distance=1500;timeTwo=10">
<h1>Calculate Speed</h1>
<p><label>Distance:</label> <input type="text" ng-model="Distance"></p>
<p> <label>Time:</label> <input type="text" ng-model="timeTwo"></p>
<p class="output"><label>Speed:</label> {{ Distance / timeTwo }}</p>
</div>
<div ng-init="Mass=2500;Acceleration=1400">
<h1>Calculate Force</h1>
<p><label>Mass:</label> <input type="text" ng-model="Mass"></p>
<p> <label>Time:</label> <input type="text" ng-model="Acceleration"></p>
<p class="output"><label>Force:</label> {{ Mass / Acceleration }}</p>
</div>
</div>
CSS:
div.main{max-width:500px;padding:25px;text-align:center;
background: rgba(210,255,82,1);
background: -moz-linear-gradient(left, rgba(210,255,82,1) 0%, rgba(210,255,82,1) 3%, rgba(139,164,28,1) 59%,
rgba(117,137,12,1) 76%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(210,255,82,1)), color-stop(3%,
rgba(210,255,82,1)), color-stop(59%, rgba(139,164,28,1)), color-stop(76%, rgba(117,137,12,1)));
background: -webkit-linear-gradient(left, rgba(210,255,82,1) 0%, rgba(210,255,82,1) 3%, rgba(139,164,28,1) 59%,
rgba(117,137,12,1) 76%);
background: -o-linear-gradient(left, rgba(210,255,82,1) 0%, rgba(210,255,82,1) 3%, rgba(139,164,28,1) 59%,
rgba(117,137,12,1) 76%);
background: -ms-linear-gradient(left, rgba(210,255,82,1) 0%, rgba(210,255,82,1) 3%, rgba(139,164,28,1) 59%,
rgba(117,137,12,1) 76%);
background: linear-gradient(to right, rgba(210,255,82,1) 0%, rgba(210,255,82,1) 3%, rgba(139,164,28,1) 59%,
rgba(117,137,12,1) 76%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ff52', endColorstr='#75890c', GradientType=1 );
margin:20px auto;
}
label{float: left;margin-left: 50px;text-align: left;width: 150px;}
input{width:200px;}
.output{font-weight:bold;font-size:25px;}
Note:Must include this link in your file
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
0 Comment(s)