這個原文為：Event Handlers。
具體什么意思，我們不管了。看看想達到的效果吧。
http://guide.mengyunzhi.com/angular-phonecat/app/#!/phones/motorola-atrix-4g
點擊右側的圖片，左側顯示圖片的大圖。示例中的動畫效果，我們將放在第十四章實現，本節僅實現點擊后，顯示相應的大圖。
## 重構頁面
使用bootstrap的柵格系統，我們首先對頁面進行重構，讓它看起來更接近我們的示例站點。
`yun-zhi/phone-detail.template.html`
~~~
<div class="container-fluid">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
</div>
~~~
重新整理元素
~~~
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img ng-src="{{$ctrl.phone.images[0]}}" class="phone img-responsive img-rounded" />
</div>
<div class="col-md-8">
<h1>{{$ctrl.phone.name}}</h1>
<p>{{$ctrl.phone.description}}</p>
<div class="row">
<div class="col-md-2" ng-repeat="img in $ctrl.phone.images">
<img ng-src="{{img}}" class="img-thumbnail" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<h4>Availability and Networks</h4>
<dl>
<dt>Availability</dt>
<dd ng-repeat="availability in $ctrl.phone.availability">{{availability}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Availability and Networks</h4>
<dl>
<dt>Availability</dt>
<dd ng-repeat="availability in $ctrl.phone.availability">{{availability}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Battery</h4>
<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>
</div>
<div class="col-md-2">
<h4>Storage and Memory</h4>
<dl>
<dt>RAM</dt>
<dd>{{$ctrl.phone.storage.ram}}</dd>
<dt>Internal Storage</dt>
<dd>{{$ctrl.phone.storage.flash}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Connectivity</h4>
<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 ng-bind-html="$ctrl.phone.connectivity.infrared | checkmark"></dd>
<dt>GPS</dt>
<dd ng-bind-html="$ctrl.phone.connectivity.gps | checkmark"></dd>
</dl>
</div>
<div class="col-md-2">
<h4>Android</h4>
<dl>
<dt>OS Version</dt>
<dd>{{$ctrl.phone.android.os}}</dd>
<dt>UI</dt>
<dd>{{$ctrl.phone.android.ui}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Size and Weight</h4>
<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>
</div>
<div class="col-md-2">
<h4>Display</h4>
<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 ng-bind-html="$ctrl.phone.display.touchScreen | checkmark"></dd>
</dl>
</div>
<div class="col-md-2">
<h4>Hardware</h4>
<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 ng-bind-html="$ctrl.phone.hardware.fmRadio | checkmark"></dd>
<dt>Accelerometer</dt>
<dd ng-bind-html="$ctrl.phone.hardware.accelerometer | checkmark"></dd>
</dl>
</div>
<div class="col-md-2">
<h4>Camera</h4>
<dl>
<dt>Primary</dt>
<dd>{{$ctrl.phone.camera.primary}}</dd>
<dt>Features</dt>
<dd>{{$ctrl.phone.camera.features.join(', ')}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Additional Features</h4>
<dd>{{$ctrl.phone.additionalFeatures}}</dd>
</div>
</div>
</div>
~~~
最終效果:
## 添加點擊事件
如果以前我們接觸過JS，相信對on-click肯定不陌生。在angularjs中，我們使用ng-click來綁定點擊事件。
`yun-zhi/phone-detail.component.js`
~~~
+ // 設置大圖
+ self.setImage = function setImage(imgUrl){
+ console.log(imgUrl);
+ };
~~~
`yun-zhi/phone-detail.template.html`
~~~
<div class="col-md-2" ng-repeat="img in $ctrl.phone.images">
- <img ng-src="{{img}}" class="img-thumbnail" />
+ <img ng-click="$ctrl.setImage(img)" ng-src="{{img}}" class="img-thumbnail" />
</div>
~~~
測試：
點擊圖片后，已經將圖片的地址傳入C層。
## 綁定數據
下面，我們將傳入值綁定到左側的大圖上。
`yun-zhi/phone-detail.component.js`
~~~
// 設置大圖
self.setImage = function setImage(imgUrl){
- console.log(imgUrl);
+ self.mainImageUrl = imgUrl;
};
...
self.phone = response.data;
+
+ // 將大圖設置為第一張圖片
+ self.setImage(self.phone.images[0]);
});
~~~
`yun-zhi/phone-detail.template.html`
~~~
<div class="col-md-4">
- <img ng-src="{{$ctrl.phone.images[0]}}" class="phone img-responsive img-rounded" />
+ <img ng-src="{{$ctrl.mainImageUrl}}" class="phone img-responsive img-rounded" />
</div>
~~~
總結：
點用戶點擊圖片時，能過setImage()將圖片的地址傳給C層，C層再通過數據雙向綁定對左側大圖的URL地址進行了替換。從而達到了點擊右側縮略圖顯示左側大圖的目的。
* * * * *
`yun-zhi/phone-detail.template.html`
~~~
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img ng-src="{{$ctrl.mainImageUrl}}" class="phone img-responsive img-rounded" />
</div>
<div class="col-md-8">
<h1>{{$ctrl.phone.name}}</h1>
<p>{{$ctrl.phone.description}}</p>
<div class="row">
<div class="col-md-2" ng-repeat="img in $ctrl.phone.images">
<img ng-click="$ctrl.setImage(img)" ng-src="{{img}}" class="img-thumbnail" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<h4>Availability and Networks</h4>
<dl>
<dt>Availability</dt>
<dd ng-repeat="availability in $ctrl.phone.availability">{{availability}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Availability and Networks</h4>
<dl>
<dt>Availability</dt>
<dd ng-repeat="availability in $ctrl.phone.availability">{{availability}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Battery</h4>
<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>
</div>
<div class="col-md-2">
<h4>Storage and Memory</h4>
<dl>
<dt>RAM</dt>
<dd>{{$ctrl.phone.storage.ram}}</dd>
<dt>Internal Storage</dt>
<dd>{{$ctrl.phone.storage.flash}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Connectivity</h4>
<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 ng-bind-html="$ctrl.phone.connectivity.infrared | checkmark"></dd>
<dt>GPS</dt>
<dd ng-bind-html="$ctrl.phone.connectivity.gps | checkmark"></dd>
</dl>
</div>
<div class="col-md-2">
<h4>Android</h4>
<dl>
<dt>OS Version</dt>
<dd>{{$ctrl.phone.android.os}}</dd>
<dt>UI</dt>
<dd>{{$ctrl.phone.android.ui}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Size and Weight</h4>
<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>
</div>
<div class="col-md-2">
<h4>Display</h4>
<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 ng-bind-html="$ctrl.phone.display.touchScreen | checkmark"></dd>
</dl>
</div>
<div class="col-md-2">
<h4>Hardware</h4>
<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 ng-bind-html="$ctrl.phone.hardware.fmRadio | checkmark"></dd>
<dt>Accelerometer</dt>
<dd ng-bind-html="$ctrl.phone.hardware.accelerometer | checkmark"></dd>
</dl>
</div>
<div class="col-md-2">
<h4>Camera</h4>
<dl>
<dt>Primary</dt>
<dd>{{$ctrl.phone.camera.primary}}</dd>
<dt>Features</dt>
<dd>{{$ctrl.phone.camera.features.join(', ')}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Additional Features</h4>
<dd>{{$ctrl.phone.additionalFeatures}}</dd>
</div>
</div>
</div>
~~~
`yun-zhi/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;
// 設置大圖
self.setImage = function setImage(imgUrl){
self.mainImageUrl = imgUrl;
};
// 使用$routeParam獲取phoneId
// $routeParam存在于angular-route模塊中
var phoneId = $routeParams.phoneId;
// 拼接存放手機數據的文件地址
var url = 'phones/' + phoneId + '.json';
// 發起請求
$http.get(
url
).
then(function(response){
console.log(response);
self.phone = response.data;
// 將大圖設置為第一張圖片
self.setImage(self.phone.images[0]);
});
}
]
});
~~~
- 前言
- 第一章：準備知識
- 第一節：GIT
- 第二節：Node.js
- 第三節：http-server
- 第四節：bower
- 第五節：firefox+chrome
- 第二章：官方示例教程
- 第零節：Hello Yunzhier
- 第一節：靜態模板
- 第二節：MVC
- 回調函數
- 第三節：組件
- 第四節：重構組件
- 2.4.1 調用組件
- 2.4.2 規劃目錄結構
- 2.4.3 剝離V層
- 2.4.4 大話測試
- 第五節：循環過濾器
- 第六節：雙向數據綁定
- 第七節：XHR與依賴注入
- 第八節：添加縮略圖
- 第九節：模擬頁面跳轉
- 2.9.1 使用bower
- 2.9.2 使用grunt
- 第十節：完善手機詳情頁
- 第十一節：自定義過濾器
- 第十二節：行為處理
- 第十三節：封裝請求
- 第十四節：應用動畫
- 第十五節：總結
- 第三章：菜譜管理示例
- 第四章：總結