mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-17 07:40:22 +00:00
148 lines
4 KiB
Text
Executable file
148 lines
4 KiB
Text
Executable file
@workInProgress
|
|
@ngdoc overview
|
|
@name Tutorial: Step 8
|
|
@description
|
|
<table id="tutorial_nav">
|
|
<tr>
|
|
<td id="previous_step">{@link tutorial.step_07 Previous}</td>
|
|
<td id="step_result">{@link http://angular.github.com/angular-phonecat/step-8/app Live Demo
|
|
}</td>
|
|
<td id="tut_home">{@link tutorial Tutorial Home}</td>
|
|
<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-7...step-8 Code
|
|
Diff}</td>
|
|
<td id="next_step">{@link tutorial.step_09 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>
|
|
...
|
|
</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>
|
|
|
|
__`test/unit/controllerSpec.js`:__
|
|
<pre>
|
|
...
|
|
it('should fetch phone detail', function(){
|
|
scope.params = {phoneId:'xyz'};
|
|
$browser.xhr.expectGET('phones/xyz.json').respond({name:'phone xyz'});
|
|
ctrl = scope.$new(PhoneDetailCtrl);
|
|
|
|
expect(ctrl.phone).toBeUndefined();
|
|
$browser.xhr.flush();
|
|
|
|
expect(ctrl.phone).toEqual({name:'phone xyz'});
|
|
});
|
|
...
|
|
</pre>
|
|
|
|
__`test/e2e/scenarios.js`:__
|
|
<pre>
|
|
...
|
|
describe('Phone detail view', function() {
|
|
|
|
beforeEach(function() {
|
|
browser().navigateTo('../../app/index.html#/phones/nexus-s');
|
|
});
|
|
|
|
|
|
it('should display nexus-s page', function() {
|
|
expect(binding('phone.name')).toBe('Nexus S');
|
|
});
|
|
});
|
|
...
|
|
</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 into the
|
|
view.
|
|
|
|
* Note how we used the `$route` `params` object from the scope managed by the root controller
|
|
(`PhoneCatCtrl`), to construct the path for the phone details xhr request. 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.
|
|
|
|
* Tests. We updated the existing end to end test and wrote a new unit test that is similar in
|
|
spirit to the one we wrote for the `PhoneListCtrl` controller.
|
|
|
|
<table id="tutorial_nav">
|
|
<tr>
|
|
<td id="previous_step">{@link tutorial.step_07 Previous}</td>
|
|
<td id="step_result">{@link http://angular.github.com/angular-phonecat/step-8/app Live Demo
|
|
}</td>
|
|
<td id="tut_home">{@link tutorial Tutorial Home}</td>
|
|
<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-7...step-8 Code
|
|
Diff}</td>
|
|
<td id="next_step">{@link tutorial.step_09 Next}</td>
|
|
</tr>
|
|
</table>
|