2 function TicTacToeCntl(){
6 'border': '1px solid black',
7 'text-align': 'center',
8 'vertical-align': 'middle',
12 this.$watch('$location.hashPath', this.readUrl);
14 TicTacToeCntl.prototype = {
15 dropPiece: function(row, col) {
16 if (!this.winner && !this.board[row][col]) {
17 this.board[row][col] = this.nextMove;
18 this.nextMove = this.nextMove == 'X' ? 'O' : 'X';
35 row(0) || row(1) || row(2) ||
36 col(0) || col(1) || col(2) ||
37 diagonal(-1) || diagonal(1);
38 function row(r) { return same(b[r][0], b[r][1], b[r][2]);}
39 function col(c) { return same(b[0][c], b[1][c], b[2][c]);}
40 function diagonal(i) { return same(b[0][1-i], b[1][1], b[2][1+i]);}
41 function same(a, b, c) { return (a==b && b==c) ? a : '';};
45 angular.foreach(this.board, function(row){
46 rows.push(row.join(','));
48 this.$location.hashPath = rows.join(';') + '/' + this.nextMove;
50 readUrl: function(value) {
52 value = value.split('/');
53 this.nextMove = value[1];
54 angular.foreach(value[0].split(';'), function(row, i){
55 this.board[i] = row.split(',');
65 <div ng:controller="TicTacToeCntl">
66 Next Player: {{nextMove}}
67 <div ng:show="winner">Player {{winner}} has won!</div>
69 <tr ng:repeat="row in board" style="height:15px;">
70 <td ng:repeat="cell in row" ng:style="cellStyle"
71 ng:click="dropPiece($parent.$index, $index)">{{cell}}</td>
74 <button ng:click="reset()">reset board</button>