mvc.html

<h1>Cookbook: MVC</h1>
<div class="cookbook-mvc"><fieldset class="workInProgress"><legend>Work in Progress</legend>
This page is currently being revised. It might be incomplete or contain inaccuracies.</fieldset>
<p>MVC allows for a clean an 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.</p>

<p>The model is simply the controller's this. 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.</p><doc:example>
  <pre class="doc-source">
    &lt;script&gt;
    function TicTacToeCntl($location){
      this.$location = $location;
      this.cellStyle= {
        'height': '20px',
        'width': '20px',
        'border': '1px solid black',
        'text-align': 'center',
        'vertical-align': 'middle',
        'cursor': 'pointer'
      };
      this.reset();
      this.$watch('$location.hashSearch.board', this.readUrl);
    }
    TicTacToeCntl.prototype = {
      dropPiece: function(row, col) {
        if (!this.winner &amp;&amp; !this.board[row][col]) {
          this.board[row][col] = this.nextMove;
          this.nextMove = this.nextMove == 'X' ? 'O' : 'X';
          this.setUrl();
        }
      },
      reset: function(){
        this.board = [
          ['', '', ''],
          ['', '', ''],
          ['', '', '']
        ];
        this.nextMove = 'X';
        this.winner = '';
        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(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 &amp;&amp; b==c) ? a : '';};
      },
      setUrl: function(){
        var rows = [];
        angular.forEach(this.board, function(row){
          rows.push(row.join(','));
        });
        this.$location.hashSearch.board = rows.join(';') + '/' + this.nextMove;
      },
      readUrl: function(scope, value) {
        if (value) {
          value = value.split('/');
          this.nextMove = value[1];
          angular.forEach(value[0].split(';'), function(row, col){
            this.board[col] = row.split(',');
          }, this);
          this.grade();
        } else {
          this.reset();
        }
      }
    };
    &lt;/script&gt;

    &lt;h3&gt;Tic-Tac-Toe&lt;/h3&gt;
    &lt;div ng:controller="TicTacToeCntl"&gt;
    Next Player: {{nextMove}}
    &lt;div class="winner" ng:show="winner"&gt;Player {{winner}} has won!&lt;/div&gt;
      &lt;table class="board"&gt;
        &lt;tr ng:repeat="row in board" style="height:15px;"&gt;
          &lt;td ng:repeat="cell in row" ng:style="cellStyle"
              ng:click="dropPiece($parent.$index, $index)"&gt;{{cell}}&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
      &lt;button ng:click="reset()"&gt;reset board&lt;/button&gt;
    &lt;/div&gt;
  </pre>
  <pre class="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();
    }
  </pre>
</doc:example><h2>Things to notice</h2>

<ul>
<li>The controller is defined in JavaScript and has no reference to the rendering logic.</li>
<li>The controller is instantiated by <tt>&lt;angular/&gt;</tt> and injected into the view.</li>
<li>The controller can be instantiated in isolation (without a view) and the code will still execute.
This makes it very testable.</li>
<li>The HTML view is a projection of the model. In the above example, the model is stored in the
board variable.</li>
<li>All of the controller's properties (such as board and nextMove) are available to the view.</li>
<li>Changing the model changes the view.</li>
<li>The view can call any controller function.</li>
<li>In this example, the <code>setUrl()</code> and <code>readUrl()</code> 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 <a href="#!/api/angular.scope.$watch"><code>$watch()</code></a> to set up a listener that invokes <code>readUrl()</code> when needed.</li>
</ul></div>