Sunday, June 1, 2014

Addition of Three Numbers Using AngularJS


As I started learning different programming languages I have learned that there are many libraries or frameworks that can help us in our day to day work as computer programmers and developers one of the most recent framework that I work with is a JavaScript framework named AngularJS.

AngularJS is an open source framework that is being manage by Google and the community to help programmers and developers to help them create single web page that uses HTML,CSS and Javascript in the client side. In addition AngularJS was designed with the use of the concept of Model-View-Controller capability to make web development and testing much easier to do.

In this example that I will show you I will write a simple program that uses AngularJS to find the sum of three numbers. What the program will do is very simple it will accept three numbers from the user, perform addition operation and then display the sum values of three number that is being given by the user.

I hope you will find my work useful in your programming projects and assignments in the near future.




Sample Output Of Our Program

Program Listing

add.htm

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<script src="angular.js"></script>
<style>
.wrapper {
  width: 90%;
  display: block;
  margin: 0 auto;
  padding: 2.5em;
}
</style>

</head>
<body bgcolor="lightgreen">
<br><br>
   <h2><center> Addition of Three Numbers Using AngularJS </center> </h2>
   
   <div class="wrapper" ng-app>
  1st No.<input type="number" placeholder="Enter a number" ng-model="num1" /><br>
  2nd No.<input type="number" placeholder="Enter a number" ng-model="num2" /><br>
  3rd No.<input type="number" placeholder="Enter a number" ng-model="num3" />
  <p>The sum total of {{num1}}, {{num2}} and {{num3}} is {{ num1 + num2 + num3}}.</p>
</div>
   
</body>
</html>




No comments:

Post a Comment