Saturday, May 16, 2015

Area of a Circle Using AngularJS

In this article I wrote a very simple application using AngularJS as our Javascript Framework that will solve the area of a circle by asking the user to enter the radius of the circle.  The code is very simple and straight forward. I am still a beginner in AngularJS programming as this moment I find it very easy to write and test our sample program.


I hope you will find our program useful in learning how to program using AngularJS one of the most popular Javascript Framework in our community right now. If you have some questions please send me an email at jakerpomperada@gmail.com and jakerpomperada@yahoo.com.

People here in the Philippines who wish to contact me can reach me in this mobile number 09173084460.

Thank you very much and God Bless us all.






Sample Program Output


Complete Program Listing

<html>
<head> 
<title> Area of the Circle in AngularJS </title>
</head>
<style>
p {
   color:blue;
   font-family: "arial";
   font-style: bold;
   font-size: 18px;
  }
  
h3{
   color:red;
   font-family: "arial";
   font-style: bold;
   font-size: 20px;
  }
  
 input[type='text'] 
   { 
   color:blue;
   font-family: "arial";
   font-size: 18px;
   font-style: bold;
   }
 </style>
<script type="text/javascript" src="angular.js"></script>
<body bgcolor="lightgreen">
<br><br>
<h3>Area of the Circle in AngularJS</h3>
<div ng-app="">
    <p>Enter the radius of circle:
        <input type="text" ng-model="radius" maxlength="5" size="3"/>
    </p><br>
    <p>The radius of the circle is {{radius}} its area is {{ radius * radius * 3.14159}}. m&#178</p>
<p> The circumference of the circle is {{ 2 * radius * 3.14159}}. m </p>
</div>.
</body>
</html>




No comments:

Post a Comment