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

49
lib/angular/docs/partials/tutorial/step_06.html Normal file → Executable file
View file

@ -1,24 +1,22 @@
<h1><code ng:non-bindable=""></code>
<span class="hint"></span>
<a href="http://github.com/angular/angular.js/edit/master/docs/content/tutorial/step_06.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_06.ngdoc" class="improve-docs btn btn-primary">Improve this doc</a><ul doc-tutorial-nav="6"></ul>
<div><div class="tutorial-page tutorial-6-templating-links-images-page"><ul doc-tutorial-nav="6"></ul>
<p>In this step, you will add thumbnail images for the phones in the phone list, and links that, for
now, will go nowhere. In subsequent steps you will use the links to display additional information
about the phones in the catalog.</p>
<div doc-tutorial-reset="6">
</div>
<p>You should now see links and images of the phones in the list.</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-5...step-6">GitHub</a>:</p>
<h3>Data</h3>
<h3>Data</h2>
<p>Note that the <code>phones.json</code> file contains unique ids and image urls for each of the phones. The
urls point to the <code>app/img/phones/</code> directory.</p>
<p><strong><code>app/phones/phones.json</code></strong> (sample snippet):
<pre class="prettyprint linenums">
[
@ -32,9 +30,7 @@ urls point to the <code>app/img/phones/</code> directory.</p>
...
]
</pre>
<h3>Template</h3>
<h2>Template</h2>
<p><strong><code>app/index.html</code>:</strong>
<pre class="prettyprint linenums">
...
@ -47,20 +43,16 @@ urls point to the <code>app/img/phones/</code> directory.</p>
&lt;/ul&gt;
...
</pre>
<p>To dynamically generate links that will in the future lead to phone detail pages, we used the
now-familiar double-curly brace binding in the <code>href</code> attribute values. In step 2, we added the
<code>{{phone.name}}</code> binding as the element content. In this step the <code>{{phone.id}}</code> binding is used in
the element attribute.</p>
<p>We also added phone images next to each record using an image tag with the <a href="api/ng.directive:ngSrc"><code>ngSrc</code></a> directive. That directive prevents the
browser from treating the angular <code>{{ expression }}</code> markup literally, and initiating a request to
invalid url <code>http://localhost:8000/app/{{phone.imageUrl}}</code>, which it would have done if we had only
specified an attribute binding in a regular <code>src</code> attribute (<code>&lt;img class="diagram" src="{{phone.imageUrl}}"&gt;</code>).
specified an attribute binding in a regular <code>src</code> attribute (<code>&lt;img class=&quot;diagram&quot; src=&quot;{{phone.imageUrl}}&quot;&gt;</code>).
Using the <code>ngSrc</code> directive prevents the browser from making an http request to an invalid location.</p>
<h3>Test</h3>
<h2>Test</h3>
<p><strong><code>test/e2e/scenarios.js</code></strong>:
<pre class="prettyprint linenums">
...
@ -71,29 +63,22 @@ Using the <code>ngSrc</code> directive prevents the browser from making an http
});
...
</pre>
<p>We added a new end-to-end test to verify that the app is generating correct links to the phone
views that we will implement in the upcoming steps.</p>
<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-6/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-6/test/e2e/runner.html">Angular&#39;s server</a>.</p>
<h2>Experiments</h1>
<ul>
<li><p>Replace the <code>ng-src</code> directive with a plain old <code>src</code> attribute. Using tools such as Firebug,
or Chrome's Web Inspector, or inspecting the webserver access logs, confirm that the app is indeed
or Chrome&#39;s Web Inspector, or inspecting the webserver access logs, confirm that the app is indeed
making an extraneous request to <code>/app/%7B%7Bphone.imageUrl%7D%7D</code> (or
<code>/app/{{phone.imageUrl}}</code>).</p>
<p>The issue here is that the browser will fire a request for that invalid image address as soon as
it hits the <code>img</code> tag, which is before Angular has a chance to evaluate the expression and inject
the valid address.</p></li>
the valid address.</p>
</li>
</ul>
<h2>Summary</h2>
<h1>Summary</h2>
<p>Now that you have added phone images and links, go to <a href="tutorial/step_07">step 7</a> to learn about Angular
layout templates and how Angular makes it easy to create applications that have multiple views.</p>
<ul doc-tutorial-nav="6"></ul></div>
<ul doc-tutorial-nav="6"></ul></div></div>