jeena/Podcast
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Upgrade to angularjs 1.2.0 rc1

Browse source
This commit is contained in:
Colin Frei 2013-08-21 19:46:51 +02:00
parent d223dfd662
commit d6b021bfaf
674 changed files with 79667 additions and 62269 deletions
Download patch file Download diff file Expand all files Collapse all files

44
lib/angular/docs/partials/cookbook/mvc.html Normal file → Executable file
View file

@ -1,20 +1,19 @@
<h1><code ng:non-bindable=""></code>
<span class="hint"></span>
<a href="http://github.com/angular/angular.js/edit/master/docs/content/cookbook/mvc.ngdoc" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable=""></code>
<div><span class="hint"></span>
</div>
</h1>
<div><a href="http://github.com/angular/angular.js/edit/master/docs/content/cookbook/mvc.ngdoc" class="improve-docs btn btn-primary">Improve this doc</a><p>MVC allows for a clean and testable separation between the behavior (controller) and the view
<div><div class="cookbook-page cookbook-mvc-page"><p>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.</p>
<p>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.</p>
<h3>Source</h3>
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-13" source-edit-css="" source-edit-js="script.js-12" source-edit-unit="" source-edit-scenario="scenario.js-14"></div>
<h3>Source</h2>
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-176" source-edit-css="" source-edit-js="script.js-175" source-edit-json="" source-edit-unit="" source-edit-scenario="scenario.js-177"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-13" ng-html-wrap=" angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-13">
<pre class="prettyprint linenums" ng-set-text="index.html-176" ng-html-wrap=" angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-176">
<h4>Tic-Tac-Toe</h4>
@ -22,8 +21,8 @@ view.</p>
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"
<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>
@ -32,8 +31,8 @@ view.</p>
</script>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-12"></pre>
<script type="text/ng-template" id="script.js-12">
<pre class="prettyprint linenums" ng-set-text="script.js-175"></pre>
<script type="text/ng-template" id="script.js-175">
function TicTacToeCntl($scope, $location) {
$scope.cellStyle= {
'height': '20px',
@ -100,8 +99,8 @@ view.</p>
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-14"></pre>
<script type="text/ng-template" id="scenario.js-14">
<pre class="prettyprint linenums" ng-set-text="scenario.js-177"></pre>
<script type="text/ng-template" id="scenario.js-177">
it('should play a game', function() {
piece(1, 1);
expect(binding('nextMove')).toEqual('O');
@ -118,11 +117,9 @@ view.</p>
}
</script>
</div>
</div><h3>Demo</h3>
<div class="well doc-example-live animator-container" ng-embed-app="" ng-set-html="index.html-13" ng-eval-javascript="script.js-12"></div>
</div><h2>Demo</h3>
<div class="well doc-example-live animate-container" ng-embed-app="" ng-set-html="index.html-176" ng-eval-javascript="script.js-175"></div>
<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 Angular and injected into the view.</li>
@ -130,9 +127,10 @@ view.</p>
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>All of the controller&#39;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/ng.$rootScope.Scope#$watch"><code>$watch()</code></a> to set up a listener that invokes <code>readUrl()</code> when needed.</li>
</ul></div>
<li>In this example, the <code>setUrl()</code> and <code>readUrl()</code> functions copy the game state to/from the URL&#39;s
hash so the browser&#39;s back button will undo game steps. See deep-linking. This example calls <a href="api/ng.$rootScope.Scope#$watch"><code>$watch()</code></a> to set up a listener that invokes <code>readUrl()</code> when needed.</li>
</ul>
</div></div>