diff options
| author | Vojta Jina | 2011-06-07 23:13:44 +0200 | 
|---|---|---|
| committer | Igor Minar | 2011-06-07 16:11:00 -0700 | 
| commit | e0ee3a0726f43972244e400863a6dcf567f00a0e (patch) | |
| tree | 4da26a12dc0598f5e52c8a61c0c432fd4ed5f7fe /docs/content/cookbook/mvc.ngdoc | |
| parent | e670a812fa85dd6a63b0d128815f9c0682ffd177 (diff) | |
| download | angular.js-e0ee3a0726f43972244e400863a6dcf567f00a0e.tar.bz2 | |
Update latest docs content from gdocs
Diffstat (limited to 'docs/content/cookbook/mvc.ngdoc')
| -rw-r--r-- | docs/content/cookbook/mvc.ngdoc | 93 | 
1 files changed, 47 insertions, 46 deletions
| diff --git a/docs/content/cookbook/mvc.ngdoc b/docs/content/cookbook/mvc.ngdoc index bc0eb653..04feffcc 100644 --- a/docs/content/cookbook/mvc.ngdoc +++ b/docs/content/cookbook/mvc.ngdoc @@ -17,7 +17,7 @@ no connection between the controller and the view.  <doc:example> - <doc:source> +  <doc:source>      <script>      function TicTacToeCntl($location){        this.$location = $location; @@ -34,8 +34,8 @@ no connection between the controller and the view.      }      TicTacToeCntl.prototype = {        dropPiece: function(row, col) { -        if (!this.winner && !this.board) { -          this.board = this.nextMove; +        if (!this.winner && !this.board[row][col]) { +          this.board[row][col] = this.nextMove;            this.nextMove = this.nextMove == 'X' ? 'O' : 'X';            this.setUrl();          } @@ -51,15 +51,15 @@ no connection between the controller and the view.          this.setUrl();        },        grade: function(){ -       var b = this.board; -       this.winner = -        row(0) || row(1) || row(2) || -        col(0) || col(1) || col(2) || -        diagonal(-1) || diagonal(1); -       function row(r) { return same(b, b, b);} -       function col(c) { return same(b, b, b);} -       function diagonal(i) { return same(b[1-i], b, b[1+i]);} -       function same(a, b, c) { return (a==b && b==c) ? a : '';}; +        var b = this.board; +        this.winner = +          row(0) || row(1) || row(2) || +          col(0) || col(1) || col(2) || +          diagonal(-1) || diagonal(1); +        function row(row) { return same(b[row][0], b[row][1], b[row][2]);} +        function col(col) { return same(b[0][col], b[1][col], b[2][col]);} +        function diagonal(i) { return same(b[0][1-i], b[1][1], b[2][1+i]);} +        function same(a, b, c) { return (a==b && b==c) ? a : '';};        },        setUrl: function(){          var rows = []; @@ -68,12 +68,12 @@ no connection between the controller and the view.          });          this.$location.hashSearch.board = rows.join(';') + '/' + this.nextMove;        }, -      readUrl: function(scope, value) { +      readUrl: function(value) {          if (value) {            value = value.split('/'); -          this.nextMove = value; -          angular.forEach(value.split(';'), function(row, i){ -            this.board = row.split(','); +          this.nextMove = value[1]; +          angular.forEach(value[0].split(';'), function(row, col){ +            this.board[col] = row.split(',');            }, this);            this.grade();          } else { @@ -82,36 +82,38 @@ no connection between the controller and the view.        }      };      </script> + +      <h3>Tic-Tac-Toe</h3>      <div ng:controller="TicTacToeCntl">      Next Player: {{nextMove}}      <div class="winner" ng:show="winner">Player {{winner}} has won!</div> -    <table class="board"> -      <tr ng:repeat="row in board" style="height:15px;"> -        <td ng:repeat="cell in row" ng:style="cellStyle" -                ng:click="dropPiece($parent.$index, $index)">{{cell}}</td> -      </tr> -    </table> -    <button ng:click="reset()">reset board</button> +      <table class="board"> +        <tr ng:repeat="row in board" style="height:15px;"> +          <td ng:repeat="cell in row" ng:style="cellStyle" +              ng:click="dropPiece($parent.$index, $index)">{{cell}}</td> +        </tr> +      </table> +      <button ng:click="reset()">reset board</button>      </div> - </doc:source> - <doc:scenario> -   it('should play a game', function(){ -    piece(1, 1); -    expect(binding('nextMove')).toEqual('O'); -    piece(3, 1); -    expect(binding('nextMove')).toEqual('X'); -    piece(1, 2); -    piece(3, 2); -    piece(1, 3); -    expect(element('.winner').text()).toEqual('Player X has won!'); -   }); - - -   function piece(row, col) { -     element('.board tr:nth-child('+row+') td:nth-child('+col+')').click(); -   } - </doc:scenario> +  </doc:source> +  <doc:scenario> +    it('should play a game', function(){ +     piece(1, 1); +     expect(binding('nextMove')).toEqual('O'); +     piece(3, 1); +     expect(binding('nextMove')).toEqual('X'); +     piece(1, 2); +     piece(3, 2); +     piece(1, 3); +     expect(element('.winner').text()).toEqual('Player X has won!'); +    }); + + +    function piece(row, col) { +      element('.board tr:nth-child('+row+') td:nth-child('+col+')').click(); +    } +  </doc:scenario>  </doc:example> @@ -123,13 +125,12 @@ no connection between the controller and the view.  * The controller is defined in JavaScript and has no reference to the rendering logic.  * The controller is instantiated by <angular/> and injected into the view.  * The controller can be instantiated in isolation (without a view) and the code will still execute. -  This makes it very testable. +This makes it very testable.  * The HTML view is a projection of the model. In the above example, the model is stored in the -  board variable. +board variable.  * All of the controller's properties (such as board and nextMove) are available to the view.  * Changing the model changes the view.  * The view can call any controller function.  * In this example, the `setUrl()` and `readUrl()` functions copy the game state to/from the URL's -  hash so the browser's back button will undo game steps. See deep-linking. This example calls -  {@link api/angular.scope.$watch $watch()} to set up a listener that invokes `readUrl()` when -needed. +hash so the browser's back button will undo game steps. See deep-linking. This example calls {@link +api/angular.scope.$watch $watch()} to set up a listener that invokes `readUrl()` when needed. | 
