40 lines
1.2 KiB
HTML
40 lines
1.2 KiB
HTML
<html ng-app="counterApp">
|
|
<head>
|
|
<title>Servant: counter</title>
|
|
<style>
|
|
body { text-align: center; }
|
|
#counter { color: green; }
|
|
#inc { margin: 0px 20px; background-color: green; color: white; }
|
|
</style>
|
|
<script src="angular.min.js" type="text/javascript"></script>
|
|
</head>
|
|
<body ng-controller="CounterCtrl">
|
|
<h1>Angular version (Service version)</h1>
|
|
<span id="counter">{{ 'Counter: ' + counter }}</span>
|
|
<button ng-click="incCounter()" id="inc">Increase</button>
|
|
<script type="text/javascript">
|
|
var counterApp = angular.module('counterApp', []);
|
|
|
|
counterApp.controller('CounterCtrl', function ($scope,counterSvc, $interval) {
|
|
// Let's define how we publish information to the $scope
|
|
var publishCounter = function (response) { $scope.counter = response.value; };
|
|
|
|
$scope.getCounter = function() {
|
|
counterSvc.getCounter()
|
|
.success(publishCounter);
|
|
}
|
|
$scope.incCounter = function() {
|
|
counterSvc.postCounter()
|
|
.success(publishCounter);
|
|
}
|
|
|
|
// Initialize the counter on load
|
|
$scope.getCounter();
|
|
// we update the value every 1sec, in the same way
|
|
$interval($scope.getCounter, 1000);
|
|
});
|
|
</script>
|
|
<script src="api.service.js" type="text/javascript"></script>
|
|
</body>
|
|
</html>
|