dasunpubudumal
9/3/2017 - 7:54 AM

app.js

index.js
content_copyfile_download
$(document).ready(function(){
	$('#sumj').text('0');
});

$('#calculate').click(function(){
	var fnum = $('#fnumj').val();
	var snum = $('#snumj').val();
	$('#sumj').text((parseInt(fnum) + parseInt(snum)));;
});
index.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<script src = "js/angular.min.js"></script>
	<script type="text/javascript" src="app.js"></script>	
	<title>title</title>
</head>
<body>
	<h1 align="center">Welcome to Learning Angular</h1>
	<hr>

	<!-- Angular way of adding numbers -->
	<div class="container" ng-app="app" ng-controller="MainController as main" align="center">
	<!-- MainController says the view to make both fnum and snum to 0 -->
		<h3>Angular Way</h3>
		<p>Enter First Number:</p><input type="number" ng-model="main.fnum">
		<p>Enter Second Number:</p><input type="number" ng-model="main.snum" >
		<p>Sum is: {{main.fnum + main.snum}}!</p>
		<hr>
	</div>
	<!-- End of Angular Way -->

	<!-- jQuery way of adding numbers -->
	<div class="container" align="center">
		<h3>jQuery way</h3>
		<p>Enter First Number:</p><input type="number" id="fnumj">
		<p>Enter Second Number:</p><input type="number" id="snumj">
		<p>Sum is: <span id="sumj" placeholder = "0"></span>!</p>
		<button id="calculate" value="Sum">Sum</button>
		<small><p><i>Note: You need a button because jQuery is not responisve.</i></p></small>
		<hr>	
	</div>
	<!-- End of jQuery way -->

	<footer>
		<div align="right">
			<small>Created by Dasun Pubudumal</small>
			<br>
			<small>03/09/2017</small>
		</div>
	</footer>
	
	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="./js/index.js"></script>

</body> 
</html>
app.js
content_copyfile_download
angular.module('app', []).controller('MainController', function(){
	this.fnum = 0;
	this.snum = 0; 
});