index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Reverse a String using AngularJS</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<style type="text/css">
#main
{
width:960px;
margin:50px auto;
font-family:raleway;
}
#form_layout
{
width:300px;
float: left;
border-radius: 10px;
font-family:raleway;
border: 2px solid #ccc;
padding: 10px 40px 25px;
margin-top: -2px;
}
</style>
<body ng-app = "mainApp" >
<div class="modal-dialog">
<div class="modal-content">
<div ng-controller = "CalcController">
<center> <h3 class="h3">Custom Services and Dependency Injection Demo</h3> </center>
<hr color =" black">
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-4"> Enter the String : </label>
<div class="col-xs-6">
<input type = "number" class="form-control" ng-model = "firstnumber" />
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-4"> Enter the String : </label>
<div class="col-xs-6">
<input type = "number" class="form-control" ng-model = "secondnumber" />
</div>
</div>
<br/>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-4">
<button ng-click = "addition()" class="btn btn-default" >+</button>
<button ng-click = "subs()"class="btn btn-default">-</button>
<button ng-click = "multiply()"class="btn btn-default" >X</button>
<button ng-click = "divid()"class="btn btn-default" >/</button>
</div>
</div>
<br>
<div class="form-group">
<label class="control-label col-xs-2"> </label>
<div class="col-xs-6">
<b>Result is : <span style="color:red"> {{ ans }} </span></b>
<br>
</div>
</div>
</div>
</body>
</html>
app.js
// code to create module
var mainApp = angular.module("mainApp", []);
// creating a service using factory method
mainApp.factory('calculate', function() {
var factory = {};
factory.addition = function(a, b) {
return a + b
}
factory.subs = function(a, b) {
return a - b
}
factory.multiply = function(a, b) {
return a * b
}
factory.divid = function(a, b) {
return a / b
}
return factory;
});
// creating a service using service method
mainApp.service('callcalculate', function(calculate){ // injecting service within service
this.addition = function(a,b){
return calculate.addition(a,b);
}
this.subs = function(a,b){
return calculate.subs(a,b);
}
this.multiply = function(a,b){
return calculate.multiply(a,b);
}
this.divid = function(a,b){
return calculate.divid(a,b);
}
});
mainApp.controller('CalcController',function($scope, callcalculate) { // injecting service within a controller
$scope.addition=function(){
$scope.ans= callcalculate.addition($scope.firstnumber,$scope.secondnumber);
}
$scope.subs=function(){
$scope.ans= callcalculate.subs($scope.firstnumber,$scope.secondnumber);
}
$scope.multiply=function(){
$scope.ans= callcalculate.multiply($scope.firstnumber,$scope.secondnumber);
}
$scope.divid=function(){
$scope.ans = callcalculate.divid($scope.firstnumber,$scope.secondnumber);
}
});
Output:
No comments:
Post a Comment