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

67
lib/angular/docs/partials/tutorial/step_08.html Normal file → Executable file
View file

@ -1,27 +1,24 @@
<h1><code ng:non-bindable=""></code>
<span class="hint"></span>
<a href="http://github.com/angular/angular.js/edit/master/docs/content/tutorial/step_08.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/tutorial/step_08.ngdoc" class="improve-docs btn btn-primary">Improve this doc</a><ul doc-tutorial-nav="8"></ul>
<div><div class="tutorial-page tutorial-8-more-templating-page"><ul doc-tutorial-nav="8"></ul>
<p>In this step, you will implement the phone details view, which is displayed when a user clicks on a
phone in the phone list.</p>
<div doc-tutorial-reset="8">
</div>
<p>Now when you click on a phone on the list, the phone details page with phone-specific information
is displayed.</p>
<p>To implement the phone details view we will use <a href="api/ng.$http"><code>$http</code></a> to fetch
our data, and we'll flesh out the <code>phone-detail.html</code> view template.</p>
our data, and we&#39;ll flesh out the <code>phone-detail.html</code> view template.</p>
<p>The most important changes are listed below. You can see the full diff on <a href="https://github.com/angular/angular-phonecat/compare/step-7...step-8">GitHub</a>:</p>
<h3>Data</h3>
<h3>Data</h2>
<p>In addition to <code>phones.json</code>, the <code>app/phones/</code> directory also contains one json file for each
phone:</p>
<p><strong><code>app/phones/nexus-s.json</code>:</strong> (sample snippet)
<pre class="prettyprint linenums">
{
@ -43,15 +40,11 @@ phone:</p>
}
}
</pre>
<p>Each of these files describes various properties of the phone using the same data structure. We'll
<p>Each of these files describes various properties of the phone using the same data structure. We&#39;ll
show this data in the phone detail view.</p>
<h3>Controller</h3>
<p>We'll expand the <code>PhoneDetailCtrl</code> by using the <code>$http</code> service to fetch the json files. This works
<h2>Controller</h2>
<p>We&#39;ll expand the <code>PhoneDetailCtrl</code> by using the <code>$http</code> service to fetch the json files. This works
the same way as the phone list controller.</p>
<p><strong><code>app/js/controllers.js</code>:</strong>
<pre class="prettyprint linenums">
function PhoneDetailCtrl($scope, $routeParams, $http) {
@ -62,16 +55,12 @@ function PhoneDetailCtrl($scope, $routeParams, $http) {
//PhoneDetailCtrl.$inject = ['$scope', '$routeParams', '$http'];
</pre>
<p>To construct the URL for the HTTP request, we use <code>$routeParams.phoneId</code> extracted from the current
route by the <code>$route</code> service.</p>
<h3>Template</h3>
<h2>Template</h2>
<p>The TBD placeholder line has been replaced with lists and bindings that comprise the phone details.
Note where we use the angular <code>{{expression}}</code> markup and <code>ngRepeat</code> to project phone data from
our model into the view.</p>
<p><strong><code>app/partials/phone-detail.html</code>:</strong>
<pre class="prettyprint linenums">
&lt;img ng-src="{{phone.images[0]}}" class="phone"&gt;
@ -101,17 +90,14 @@ our model into the view.</p>
&lt;/li&gt;
&lt;/ul&gt;
</pre>
<div style="display: none">
TODO!
<img class="diagram" src="img/tutorial/tutorial_08-09_final.png">
</div>
<h3>Test</h3>
<h2>Test</h3>
<p>We wrote a new unit test that is similar to the one we wrote for the <code>PhoneListCtrl</code> controller in
step 5.</p>
<p><strong><code>test/unit/controllersSpec.js</code>:</strong>
<pre class="prettyprint linenums">
...
@ -137,15 +123,10 @@ step 5.</p>
});
...
</pre>
<p>You should now see the following output in the Testacular tab:</p>
<pre><code>Chrome 22.0: Executed 3 of 3 SUCCESS (0.039 secs / 0.012 secs)
</code></pre>
<p>You should now see the following output in the Karma tab:</p>
<pre><code>Chrome 22.0: Executed 3 of 3 SUCCESS (0.039 secs / 0.012 secs)</code></pre>
<p>We also added a new end-to-end test that navigates to the Nexus S detail page and verifies that the
heading on the page is "Nexus S".</p>
heading on the page is &quot;Nexus S&quot;.</p>
<p><strong><code>test/e2e/scenarios.js</code>:</strong>
<pre class="prettyprint linenums">
...
@ -162,20 +143,14 @@ heading on the page is "Nexus S".</p>
});
...
</pre>
<p>You can now rerun <code>./scripts/e2e-test.sh</code> or refresh the browser tab with the end-to-end test
runner to see the tests run, or you can see them running on <a href="http://angular.github.com/angular-phonecat/step-8/test/e2e/runner.html">Angular's server</a>.</p>
<h2>Experiments</h2>
runner to see the tests run, or you can see them running on <a href="http://angular.github.com/angular-phonecat/step-8/test/e2e/runner.html">Angular&#39;s server</a>.</p>
<h2>Experiments</h1>
<ul>
<li>Using the <a href="guide/dev_guide.e2e-testing">Angular's end-to-end test runner API</a>, write a test
<li>Using the <a href="guide/dev_guide.e2e-testing">Angular&#39;s end-to-end test runner API</a>, write a test
that verifies that we display 4 thumbnail images on the Nexus S details page.</li>
</ul>
<h2>Summary</h2>
<h1>Summary</h2>
<p>Now that the phone details view is in place, proceed to <a href="tutorial/step_09">step 9</a> to learn how to
write your own custom display filter.</p>
<ul doc-tutorial-nav="8"></ul></div>
<ul doc-tutorial-nav="8"></ul></div></div>