本節，我們將完善手機詳情頁面。 上節中，我們直接將模板的信息寫在了phone-detail.component.js中，這樣做當然違背了MVC的原則。 # 新建模板文件 `phone-detail.component.js` ~~~ - template: 'id:{{$ctrl.phoneId}}', + templateUrl: 'yun-zhi/phone-detail.template.html', ~~~ `phone-detail.template.html` ~~~ id:{{$ctrl.phoneId}} ~~~ # 動態獲取數據 在前面的章節中，我們已經學會了通過$http來獲取動態手機列表的數據了。在這，我們用同樣的方法來獲取手機詳情數據。 ## 下載示例數據 下載地址： http://guide.mengyunzhi.com/angular-phonecat/app/phones/phones.zip 下載后解壓至`phones`文件夾 > 下載的壓縮包中包括了我們上次下載的phones.json文件，選擇保留或是替換都不會有影響。 解壓后，在根目錄的中的phones文件夾中，將增加以下數據文件。 ~~~ ├── phones │?? ├── dell-streak-7.json │?? ├── dell-venue.json │?? ├── droid-2-global-by-motorola.json │?? ├── droid-pro-by-motorola.json │?? ├── lg-axis.json │?? ├── motorola-atrix-4g.json │?? ├── motorola-bravo-with-motoblur.json │?? ├── motorola-charm-with-motoblur.json │?? ├── motorola-defy-with-motoblur.json │?? ├── motorola-xoom-with-wi-fi.json │?? ├── motorola-xoom.json │?? ├── nexus-s.json │?? ├── phones.json │?? ├── samsung-galaxy-tab.json │?? ├── samsung-gem.json │?? ├── samsung-mesmerize-a-galaxy-s-phone.json │?? ├── samsung-showcase-a-galaxy-s-phone.json │?? ├── samsung-transform.json │?? ├── sanyo-zio.json │?? ├── t-mobile-g2.json │?? └── t-mobile-mytouch-4g.json ~~~ 我們隨便打開一個看看 `dell-streak-7.json` ~~~ { "additionalFeatures": "Front Facing 1.3MP Camera", "android": { "os": "Android 2.2", "ui": "Dell Stage" }, "availability": [ "T-Mobile" ], "battery": { "standbyTime": "", "talkTime": "", "type": "Lithium Ion (Li-Ion) (2780 mAH)" }, "camera": .... ~~~ 沒錯，存儲是手機一些基本信息。 ## 使用$http獲取數據 `phone-detail.component.js` ~~~ angular. module('yunZhi'). component('phoneDetail', { templateUrl: 'yun-zhi/phone-detail.template.html', controller: ['$http', '$routeParams', function PhoneListController($http, $routeParams) { var self = this; // 使用$routeParam獲取phoneId // $routeParam存在于angular-route模塊中 var phoneId = $routeParams.phoneId; // 拼接存放手機數據的文件地址 var url = 'phones/' + phoneId + '.json'; // 控制臺打印 console.log(url); // 發起請求 $http.get( url ). then(function(response){ console.log(response); self.phone = response.data; }); } ] }); ~~~ ## 修改模板查看獲取到的數據 `phone-detail.template.html` ~~~ {{$ctrl.phone}} ~~~ ## 測試  我們使用控制臺打輸出數據，用以確定數據成功的返回。 我們使用V層直接打印數據，用以確定數據成功的傳入至V層。 # 完善模板文件 `phone-detail.template.html` ~~~ <img ng-src="{{$ctrl.phone.images[0]}}" class="phone" /> <h1>{{$ctrl.phone.name}}</h1> <p>{{$ctrl.phone.description}}</p> <ul class="phone-thumbs"> <li ng-repeat="img in $ctrl.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 $ctrl.phone.availability">{{availability}}</dd> </dl> </li> <li> <span>Battery</span> <dl> <dt>Type</dt> <dd>{{$ctrl.phone.battery.type}}</dd> <dt>Talk Time</dt> <dd>{{$ctrl.phone.battery.talkTime}}</dd> <dt>Standby time (max)</dt> <dd>{{$ctrl.phone.battery.standbyTime}}</dd> </dl> </li> <li> <span>Storage and Memory</span> <dl> <dt>RAM</dt> <dd>{{$ctrl.phone.storage.ram}}</dd> <dt>Internal Storage</dt> <dd>{{$ctrl.phone.storage.flash}}</dd> </dl> </li> <li> <span>Connectivity</span> <dl> <dt>Network Support</dt> <dd>{{$ctrl.phone.connectivity.cell}}</dd> <dt>WiFi</dt> <dd>{{$ctrl.phone.connectivity.wifi}}</dd> <dt>Bluetooth</dt> <dd>{{$ctrl.phone.connectivity.bluetooth}}</dd> <dt>Infrared</dt> <dd>{{$ctrl.phone.connectivity.infrared}}</dd> <dt>GPS</dt> <dd>{{$ctrl.phone.connectivity.gps}}</dd> </dl> </li> <li> <span>Android</span> <dl> <dt>OS Version</dt> <dd>{{$ctrl.phone.android.os}}</dd> <dt>UI</dt> <dd>{{$ctrl.phone.android.ui}}</dd> </dl> </li> <li> <span>Size and Weight</span> <dl> <dt>Dimensions</dt> <dd ng-repeat="dim in $ctrl.phone.sizeAndWeight.dimensions">{{dim}}</dd> <dt>Weight</dt> <dd>{{$ctrl.phone.sizeAndWeight.weight}}</dd> </dl> </li> <li> <span>Display</span> <dl> <dt>Screen size</dt> <dd>{{$ctrl.phone.display.screenSize}}</dd> <dt>Screen resolution</dt> <dd>{{$ctrl.phone.display.screenResolution}}</dd> <dt>Touch screen</dt> <dd>{{$ctrl.phone.display.touchScreen}}</dd> </dl> </li> <li> <span>Hardware</span> <dl> <dt>CPU</dt> <dd>{{$ctrl.phone.hardware.cpu}}</dd> <dt>USB</dt> <dd>{{$ctrl.phone.hardware.usb}}</dd> <dt>Audio / headphone jack</dt> <dd>{{$ctrl.phone.hardware.audioJack}}</dd> <dt>FM Radio</dt> <dd>{{$ctrl.phone.hardware.fmRadio}}</dd> <dt>Accelerometer</dt> <dd>{{$ctrl.phone.hardware.accelerometer}}</dd> </dl> </li> <li> <span>Camera</span> <dl> <dt>Primary</dt> <dd>{{$ctrl.phone.camera.primary}}</dd> <dt>Features</dt> <dd>{{$ctrl.phone.camera.features.join(', ')}}</dd> </dl> </li> <li> <span>Additional Features</span> <dd>{{$ctrl.phone.additionalFeatures}}</dd> </li> </ul> ~~~ ## 測試 前面我們一直在電腦的瀏覽器上進行測試。這次，我們查看一下它在手機瀏覽器上的表現效果。測試手機應用最好的方法，當然是使用手機直接瀏覽。我們僅需要將手機與電腦接入相同的WIFI，然后在手機瀏覽器上輸入http-server啟動時的另外一個非127.0.0.1的地址即可。  除此之外，很幸運，chrome和firefox都為我們提供了模擬手機測試的功能。  > 找開控制臺后，我們點選手機小圖標后，選可以選擇模擬的手機型號，象素，比例，屏幕擺放方式幾項信息。