mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-17 07:40:22 +00:00
110 lines
3.2 KiB
Text
Executable file
110 lines
3.2 KiB
Text
Executable file
@workInProgress
|
|
@ngdoc overview
|
|
@name Tutorial: Step 8
|
|
@description
|
|
<table id="tutorial_nav">
|
|
<tr>
|
|
<td id="previous_step">{@link tutorial.step_7 Previous}</td>
|
|
<td id="step_result">{@link http://angular.github.com/angular-phonecat/step-8/app Example}</td>
|
|
<td id="tut_home">{@link tutorial Tutorial Home}</td>
|
|
<td id="code_diff">{@link
|
|
https://github.com/angular/angular-phonecat/commit/1f91f571bdd6f1e705ebb303998afe7820ffc6d9 Code
|
|
Diff}</td>
|
|
<td id="next_step">{@link tutorial.step_9 Next}</td>
|
|
</tr>
|
|
</table>
|
|
|
|
In this step, we implement the Phone Details View template. Once again we will use {@link
|
|
angular.services.$xhr $xhr} to fetch our data, and we'll flesh out the `phone-details.html` View
|
|
template.
|
|
|
|
__`app/partials/phone-details.html`:__
|
|
<pre>
|
|
<img ng:src="{{phone.images[0]}}" class="phone"/>
|
|
|
|
<h1>{{phone.name}}</h1>
|
|
|
|
<p>{{phone.description}}</p>
|
|
|
|
<ul class="phone-thumbs">
|
|
<li ng:repeat="img in phone.images">
|
|
<img ng:src="{{img}}"/>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul class="specs">
|
|
<li>
|
|
<span>Availability and Networks</span>
|
|
<dl>
|
|
<dt>Availability</dt>
|
|
<dd ng:repeat="availability in phone.availability">{{availability}}</dd>
|
|
</dl>
|
|
</li>
|
|
...
|
|
<span>Additional Features</span>
|
|
<dd>{{phone.additionalFeatures}}</dd>
|
|
</li>
|
|
</ul>
|
|
</pre>
|
|
|
|
__`app/js/controller.js`:__
|
|
<pre>
|
|
function PhoneCatCtrl($route) (same as Step 7)
|
|
|
|
function PhoneListCtrl($xhr) (same as Step 7)
|
|
|
|
function PhoneDetailCtrl($xhr) {
|
|
var self = this;
|
|
|
|
$xhr('GET', 'phones/' + self.params.phoneId + '.json', function(code, response) {
|
|
self.phone = response;
|
|
});
|
|
}
|
|
|
|
//PhoneDetailCtrl.$inject = ['$xhr'];
|
|
</pre>
|
|
|
|
__`app/phones/nexus-s.json`:__ (sample snippet)
|
|
<pre>
|
|
{
|
|
"additionalFeatures": "Contour Display, Near Field Communications (NFC), Three-axis gyroscope,
|
|
Anti-fingerprint display coating, Internet Calling support (VoIP/SIP)",
|
|
"android": {
|
|
"os": "Android 2.3",
|
|
"ui": "Android"
|
|
},
|
|
...
|
|
"images": [
|
|
"img/phones/nexus-s.0.jpg",
|
|
"img/phones/nexus-s.1.jpg",
|
|
"img/phones/nexus-s.2.jpg",
|
|
"img/phones/nexus-s.3.jpg"
|
|
],
|
|
"storage": {
|
|
"flash": "16384MB",
|
|
"ram": "512MB"
|
|
}
|
|
}
|
|
</pre>
|
|
|
|
## Discussion:
|
|
|
|
* Phone Details View Template. There is nothing fancy or new here, just note where we use the
|
|
angular `{{ expression }}` markup and directives to project phone data from our model.
|
|
|
|
* Note how we used the `$route` `params` object from the scope managed by the root controller
|
|
(`PhoneCatCtrl`), to construct the path to the phone details requested by the user. The rest of
|
|
this step is simply applying the previously learned concepts and angular APIs to create a large
|
|
template that displays a lot of data about a phone.
|
|
|
|
<table id="tutorial_nav">
|
|
<tr>
|
|
<td id="previous_step">{@link tutorial.step_7 Previous}</td>
|
|
<td id="step_result">{@link http://angular.github.com/angular-phonecat/step-8/app Example}</td>
|
|
<td id="tut_home">{@link tutorial Tutorial Home}</td>
|
|
<td id="code_diff">{@link
|
|
https://github.com/angular/angular-phonecat/commit/1f91f571bdd6f1e705ebb303998afe7820ffc6d9 Code
|
|
Diff}</td>
|
|
<td id="next_step">{@link tutorial.step_9 Next}</td>
|
|
</tr>
|
|
</table>
|