在這一步,你將實(shí)現(xiàn)手機(jī)詳細(xì)信息視圖,這個視圖會在用戶點(diǎn)擊手機(jī)列表中的一部手機(jī)時被顯示出來。
請重置工作目錄:
git checkout -f step-8
現(xiàn)在當(dāng)你點(diǎn)擊列表中的一部手機(jī)之后,這部手機(jī)的詳細(xì)信息頁面就會被顯示出來。
為了實(shí)現(xiàn)手機(jī)詳細(xì)信息視圖我們將會使用$http來獲取數(shù)據(jù),同時我們也要增添一個phone-detail.html
視圖模板。
步驟7和步驟8之間最重要的不同在下面列出。你可以在GitHub里看到完整的差別。
除了phones.json
,app/phones/
目錄也包含了每一部手機(jī)信息的json文件。
app/phones/nexus-s.json(樣例片段)
{
"additionalFeatures": "Contour Display, Near Field Communications (NFC),...",
"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"
}
}
這些文件中的每一個都用相同的數(shù)據(jù)結(jié)構(gòu)描述了一部手機(jī)的不同屬性。我們會在手機(jī)詳細(xì)信息視圖中顯示這些數(shù)據(jù)。
我們使用$http
服務(wù)獲取數(shù)據(jù),以此來拓展我們的PhoneListCtrl
。這和之前的手機(jī)列表控制器的工作方式是一樣的。
app/js/controllers.js
function PhoneDetailCtrl($scope, $routeParams, $http) {
$http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
$scope.phone = data;
});
}
//PhoneDetailCtrl.$inject = ['$scope', '$routeParams', '$http'];
為了構(gòu)造HTTP請求的URL,我們需要$route
服務(wù)提供的當(dāng)前路由中抽取$routeParams.phoneId
。
phone-detail.html文件中原有的TBD占位行已經(jīng)被列表和構(gòu)成手機(jī)詳細(xì)信息的綁定替換掉了。注意到,這里我們使用AngularJS的{{表達(dá)式}}
標(biāo)記和ngRepeat
來在視圖中渲染數(shù)據(jù)模型。
app/partials/phone-detail.html
<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>
我們來寫一個新的單元測試,這個測試和我們在步驟5中為PhoneListCtrl
寫的那個很像。
test/unit/controllersSpec.js
...
describe('PhoneDetailCtrl', function(){
var scope, $httpBackend, ctrl;
beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) {
$httpBackend = _$httpBackend_;
$httpBackend.expectGET('phones/xyz.json').respond({name:'phone xyz'});
$routeParams.phoneId = 'xyz';
scope = $rootScope.$new();
ctrl = $controller(PhoneDetailCtrl, {$scope: scope});
}));
it('should fetch phone detail', function() {
expect(scope.phone).toBeUndefined();
$httpBackend.flush();
expect(scope.phone).toEqual({name:'phone xyz'});
});
});
...
執(zhí)行./scripts/test.sh
腳本來執(zhí)行測試,你應(yīng)該會看到如下輸出:
Chrome: Runner reset.
...
Total 3 tests (Passed: 3; Fails: 0; Errors: 0) (5.00 ms)
Chrome 19.0.1084.36 Mac OS: Run 3 tests (Passed: 3; Fails: 0; Errors 0) (5.00 ms)
同時,我們也添加一個端到端測試,指向Nexus S手機(jī)詳細(xì)信息頁面并且驗證頁面的頭部是“Nexus S”。
test/e2e/scenarios.js
...
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');
});
});
...
你現(xiàn)在可以刷新你的瀏覽器,然后重新跑一遍端到端測試,或者你可以在AngularJS的服務(wù)器上運(yùn)行一下。
使用AngularJS端到端測試API寫一個測試,用它來驗證我們在Nexus S詳細(xì)信息頁面顯示的四個縮略圖。
現(xiàn)在手機(jī)詳細(xì)頁面已經(jīng)就緒了,在步驟9中我們將學(xué)習(xí)如何寫一個顯示過濾器。
更多建議: