步驟3——把模板添加到組件
步驟3——把模板添加到組件
工作區(qū)切換到步驟3
git checkout -f step-3
app/index.html
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="app.css" />
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
<script src="phone-list.component.js"></script>
</head>
<body>
<!-- Use a custom component to render a list of phones -->
<phone-list></phone-list>
</body>
</html>
我們繼續(xù)分析一下上面的代碼
1、引入組件文件
<script src="phone-list.component.js"></script>
2、在body里添加組件
<phone-list></phone-list>
讓我們看一下phone-list.component.js里面到底是怎么編寫的
'use strict';
// Register `phoneList` component, along with its associated controller and template
angular.
module('phonecatApp').
component('phoneList', {
template:
'<ul>' +
'<li ng-repeat="phone in $ctrl.phones">' +
'<span>{{phone.name}}</span>' +
'<p>{{phone.snippet}}</p>' +
'</li>' +
'</ul>',
controller: function PhoneListController() {
this.phones = [
{
name: 'Nexus S',
snippet: 'Fast just got faster with Nexus S.'
}, {
name: 'Motorola XOOM? with Wi-Fi',
snippet: 'The Next, Next Generation tablet.'
}, {
name: 'MOTOROLA XOOM?',
snippet: 'The Next, Next Generation tablet.'
}
];
}
});
工作區(qū)切換到步驟4
index.html
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="app.css" />
<script src="bower_components/angular/angular.js"></script>
<script src="app.module.js"></script>
<script src="phone-list/phone-list.module.js"></script>
<script src="phone-list/phone-list.component.js"></script>
</head>
<body>
<!-- Use a custom component to render a list of phones -->
<phone-list></phone-list>
</body>
</html>
app.module.js
'use strict';
// Define the `phonecatApp` module
angular.module('phonecatApp', [
// ...which depends on the `phoneList` module
'phoneList'
]);
工作區(qū)切換到步驟5——過濾轉(zhuǎn)換器
我們在上一步我們做了大量的工作，為后面打下了良好基礎(chǔ)。所以現(xiàn)在我們可以簡單的擴(kuò)展就添加一個全文搜索的功能（是的，這很簡單！）。我們也會寫一個端到端（end-to-end,E2E）測試,因?yàn)榱己玫亩说蕉藴y試是應(yīng)用的好朋友，就像有一雙眼睛時刻看著應(yīng)用，快速定位故障。
程序會有一個搜索框。你需要注意在搜索框輸入時電話列表的變化。
模板
這里我們將引入phone-list.template.html模板
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Sidebar content-->
Search: <input ng-model="$ctrl.query" />
</div>
<div class="col-md-10">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
我們添加了一個標(biāo)準(zhǔn)的HTML<input>標(biāo)簽，并對ngRepeat指令應(yīng)用了Angular的filter功能來處理<code><input></code>輸入。
就是這些改變讓用戶輸入搜索條件后馬上可以在手機(jī)列表中看到對應(yīng)的變化。這些新代碼展示了：
數(shù)據(jù)綁定：這一Angular核心特性。當(dāng)頁面加載后，Angular把input標(biāo)簽定義的輸入框的值綁定到一個命名變量中（頁面中命名為query的變量），這個變量還以相同的名字存在于數(shù)據(jù)模型中，二者是完全同步的。在這個代碼中輸入框鍵入的內(nèi)容（綁定到query）會立即作為列表輸出時的過濾條件 (通過phone in phones | filter:query 這一句)。數(shù)據(jù)模型的變化導(dǎo)致轉(zhuǎn)換器的輸入改變,轉(zhuǎn)換器通過更新DOM來反映模型的當(dāng)前狀態(tài)。
使用filter過濾器：filter功能使用query來創(chuàng)建一個新的數(shù)組（只有那些記錄中匹配了query對應(yīng)值），ngRepeat自動根據(jù)附加了filter變動的手機(jī)列表數(shù)據(jù)。這在開發(fā)過程中是完全透明的。
