(public).sospep.systems ~ view step ~ step-006-templating-and-links

<h1 style="text-align: center;">step-006 - templating links and images</h1>
&nbsp;
<ol>
<li>[00:00] NEW step IN</li>
<ol>
<li>x] git checkout -f step-6 - resets app code for this example</li>
<li>*] index page now displays ...</li>
</ol>
<li>[00:00] NEW step IN</li>
<ol>
<li>x]</li>
</ol></ol>
&nbsp;
<h1 style="text-align: center;">need to know</h1>
&nbsp;
<ol>
<li>] data </li>
<ol>
<li>] 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.</li>
</ol>
<li>] template </li>
<ol>
<li>] 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.</li>
<ol>
<li>&nbsp; &lt;ahref="#/phones/{{phone.id}}"&gt;{{phone.name}}&lt;/a&gt;</li>
</ol>
<li>] We also added phone images next to each record using an image tag with the <a href="https://docs.angularjs.org/api/ng/directive/ngSrc">ngSrc</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;imgsrc="{{phone.imageUrl}}"&gt;</code>). Using the <code>ngSrc</code> directive prevents the browser from making an http request to an invalid location.</li>
<ol>
<li>&lt;ahref="#/phones/{{phone.id}}"class="thumb"&gt;&lt;imgng-src="{{phone.imageUrl}}"&gt;&lt;/a&gt;</li>
</ol></ol>
<li>] test </li>
<ol>
<li>] 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.</li>
<li>] see test</li>
<li>] You can now rerun <code>npm run protractor</code> to see the tests run.</li>
</ol>
<li>] experiments</li>
<ol>
<li>]</li>
</ol>
<li>] summary</li>
<ol>
<li>Now that you have added phone images and links, go to <a href="https://docs.angularjs.org/tutorial/step_07" target="_blank">step 7</a> to learn about Angular layout templates and how Angular makes it easy to create applications that have multiple views.</li>
</ol></ol>

~ view step ~ Procedure] angular-tutorial FROM [ App] framework-angular IN [ servers] technology-developer-www