aboutsummaryrefslogtreecommitdiffstats
path: root/docs/content/cookbook/mvc.ngdoc
diff options
context:
space:
mode:
Diffstat (limited to 'docs/content/cookbook/mvc.ngdoc')
-rw-r--r--docs/content/cookbook/mvc.ngdoc128
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.