diff options
Diffstat (limited to 'docs/content/cookbook/mvc.ngdoc')
| -rw-r--r-- | docs/content/cookbook/mvc.ngdoc | 128 |
1 files changed, 0 insertions, 128 deletions
diff --git a/docs/content/cookbook/mvc.ngdoc b/docs/content/cookbook/mvc.ngdoc deleted file mode 100644 index 59f9ef85..00000000 --- a/docs/content/cookbook/mvc.ngdoc +++ /dev/null @@ -1,128 +0,0 @@ -@ngdoc overview -@name Cookbook: MVC -@description - -MVC allows for a clean and testable separation between the behavior (controller) and the view -(HTML template). A Controller is just a JavaScript class which is grafted onto the scope of the -view. This makes it very easy for the controller and the view to share the model. - -The model is a set of objects and primitives that are referenced from the Scope ($scope) object. -This makes it very easy to test the controller in isolation since one can simply instantiate the -controller and test without a view, because there is no connection between the controller and the -view. - - -<doc:example> - <doc:source> - <script> - function TicTacToeCntl($scope, $location) { - $scope.cellStyle= { - 'height': '20px', - 'width': '20px', - 'border': '1px solid black', - 'text-align': 'center', - 'vertical-align': 'middle', - 'cursor': 'pointer' - }; - - $scope.reset = function() { - $scope.board = [ - ['', '', ''], - ['', '', ''], - ['', '', ''] - ]; - $scope.nextMove = 'X'; - $scope.winner = ''; - setUrl(); - }; - - $scope.dropPiece = function(row, col) { - if (!$scope.winner && !$scope.board[row][col]) { - $scope.board[row][col] = $scope.nextMove; - $scope.nextMove = $scope.nextMove == 'X' ? 'O' : 'X'; - setUrl(); - } - }; - - $scope.reset(); - $scope.$watch(function() { return $location.search().board;}, readUrl); - - function setUrl() { - var rows = []; - angular.forEach($scope.board, function(row) { - rows.push(row.join(',')); - }); - $location.search({board: rows.join(';') + '/' + $scope.nextMove}); - } - - function grade() { - var b = $scope.board; - $scope.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 : '';}; - } - - function readUrl(value) { - if (value) { - value = value.split('/'); - $scope.nextMove = value[1]; - angular.forEach(value[0].split(';'), function(row, col){ - $scope.board[col] = row.split(','); - }); - grade(); - } - } - } - </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 track by $index" style="height:15px;"> - <td ng-repeat="cell in row track by $index" 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:example> - - -# Things to notice - -* 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. -* The HTML view is a projection of the model. In the above example, the model is stored in the -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/ng.$rootScope.Scope#methods_$watch $watch()} to set up a listener that invokes `readUrl()` when needed. |
