本节，我们将完善手机详情页面。 上节中，我们直接将模板的信息写在了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都为我们提供了模拟手机测试的功能。  > 找开控制台后，我们点选手机小图标后，选可以选择模拟的手机型号，象素，比例，屏幕摆放方式几项信息。