目次
AngularJSを使ったウェブアプリの開発の課題である。
数字が大きくなるにつれて複雑になるので、まずは1から順にこなしていってほしい。
<!doctype html>
<html ng-app="SimpleCalc">
<head>
<script type="text/javascript" src="vendors/angular.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
<script type="text/javascript" src="js/services.js"></script>
<link rel="stylesheet" href="css/app.css">
</head>
<body ng-controller="CalcController">
<h1>シンプル電卓 <small>Ver 0.01</small></h1>
<table>
<tr>
<td id="disp" colspan="5">0</td>
</tr>
<tr ng-repeat="br in cs.buttons">
<td ng-repeat="b in br">
<button>{{b}}</button>
</td>
</tr>
</table>
</body>
</html>(function(){
var app=angular.module("SimpleCalc",[]);
}());(function(){
var app=angular.module("SimpleCalc");
app.controller("CalcController",function($scope,CalcService){
$scope.cs=CalcService;
});
}());(function(){
var app=angular.module("SimpleCalc");
app.factory("CalcService",function(){
var cs={};
cs.buttons=[
['7','8','9','÷','C'],
['4','5','6','×','M'],
['1','2','3','-','←'],
['0','.','=','+','√'],
];
return cs;
});
}());button{
width:40px;
height:40px;
font-size: 20px;
}
#disp{
background-color: black;
color: white;
font-size: 40px;
text-align: right;
padding: 10px;
}