我們在上一步中為開發應用打基礎做了很多工作，現在我們將做一些簡單的事情；我們將添加全文搜索（是的，它很簡單?。Ｎ覀冞€將編寫一個端到端測試，因為一個好的端到端測試可以幫上大忙。它監視著你的應用，并在發生回歸時迅速報告。
把工作空間重置到第三步
git checkout -f step-3刷新你的瀏覽器或在線檢查這一步：Step 3 Live Demo
下面列出了第二步和第三步之間最重要的區別。你可以在GitHub里看到完整的差異。
我們對控制器不作修改。
app/index.html:
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Sidebar content-->
Search: <input ng-model="query">
</div>
<div class="col-md-10">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in phones | filter:query">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>我們添加了一個標準HTML<input>元素標記，并使用Angular的filter函數來處理repeat指令的輸入。
這使用戶輸入搜索條件，并在手機列表中快速看到搜索結果。新的代碼演示如下：
數據綁定：這是Angular的一個核心功能。當網頁載入時，Angular把輸入框的名稱綁定到數據模塊的同名的變量上，并保持兩者同步。
在代碼中，用戶打字到輸入框的數據（命名為query）很快可以作為一個篩選器輸入到列表迭代器（phone in phones | filter:query）中。在改變數據模塊的時候，導致迭代器的輸入發生變化，迭代器有效地更新了DOM，以反映模塊的當前狀態。
使用filter篩選器：filter函數使用了query值發創建一個新的數列，只包含匹配query的記錄。
ngRepeat自動更新了視力，以響應filter篩選器返回的手機數字的變化。該處理對開發者來說是完全透明的。
在第二步中，我們學會了如何編寫并運行單元測試。對于測試我們的用JavaScript編寫的應用程序的控制器和其它組件，單元測試是完美的，但是測試DOM操作或測試我們的應用程序的接通不太方便。針對這些，一個端到端的測試是一個更好的選擇。
該搜索功能完全是通過模板和數據綁定來實現的，我們將編寫我們第一個端到端的測試，以驗證該功能起了什么作用。
test/e2e/scenarios.js:
describe('PhoneCat App', function() {
describe('Phone list view', function() {
beforeEach(function() {
browser.get('app/index.html');
});
it('should filter the phone list as a user types into the search box', function() {
var phoneList = element.all(by.repeater('phone in phones'));
var query = element(by.model('query'));
expect(phoneList.count()).toBe(3);
query.sendKeys('nexus');
expect(phoneList.count()).toBe(1);
query.clear();
query.sendKeys('motorola');
expect(phoneList.count()).toBe(2);
});
});
});這個測試驗證了搜索框以及迭代器是否正確地接通了。注意，在Angular中，編寫端到端測試是如此地容易。雖然這個示例只針對一個簡單的測試，但是它確實很容易測試任何功能化的、可讀的、端到端的測試。
甚至雖然測試的句法看起來很像我們的用Jasmine編寫的控制器單元測試，但是端到端測試使用Protractor的API。在http://angular.github.io/protractor/可以讀到Protractor的API。
與Karma很像的是針對單元測試的測試運行者，我們使用Protractor以運行端到端測試。用npm run protractor來嘗試它。端到端測試很慢，所以與單元測試不同，在運行測試之后Protractor將退出，不會自動在每次文件更改時重新運行測試套裝。要想重新運行測試套裝，需要再次執行npm run protractor。
通過添加一個綁定到index.html模板的{{query}}來顯示query模塊當前的值，并看到當你在輸入框中打字時，它如何變化。
讓我們看到我們可以取得query模板的當前值，模塊出現在HTML網頁的標題上。
把一個端到端測試添加到describe塊中，test/e2e/scenarios.js看起來將如這：
describe('PhoneCat App', function() {
describe('Phone list view', function() {
beforeEach(function() {
browser.get('app/index.html');
});
var phoneList = element.all(by.repeater('phone in phones'));
var query = element(by.model('query'));
it('should filter the phone list as a user types into the search box', function() {
expect(phoneList.count()).toBe(3);
query.sendKeys('nexus');
expect(phoneList.count()).toBe(1);
query.clear();
query.sendKeys('motorola');
expect(phoneList.count()).toBe(2);
});
it('should display the current filter value in the title bar', function() {
query.clear();
expect(browser.getTitle()).toMatch(/Google Phone Gallery:\s*$/);
query.sendKeys('nexus');
expect(browser.getTitle()).toMatch(/Google Phone Gallery: nexus$/);
});
});
});運行protractor（npm run protractor），看到測試失敗了。
你可能認為你只需要用以下方式向標題標簽添加{{query}}：
<title>Google Phone Gallery: {{query}}</title>然而，當你重載入這個網頁的時候，你不會看到想要的結果。這是因為“查詢”模塊駐留在作用域內，由ng-controller="PhoneListCtrl"指令在body元素上定義。
<body ng-controller="PhoneListCtrl">如果你想要從<title>元素上綁定查詢模塊，你必須把ngController聲明移動到HTML元素上，因為它是body元素和title元素常用的父元素。
<html ng-app="phonecatApp" ng-controller="PhoneListCtrl">確保從body元素中移除ng-controller聲明。
重新運行rpm run protractor，看到現在測試已經看通過了。
在title元素內部使用雙花工作得很好，與此同時，你可能會注意到頁面加載的一瞬間它們確實顯示給用戶了。一個更好的解決方案是使用ngBind指令或ngBindTemplate指令，當頁面加載時用戶能看到它們。
<title ng-bind-template="Google Phone Gallery: {{query}}">Google Phone Gallery</title>我們現在已經把全文搜索添加上去了，還包含了一個用來驗證搜索是否起作用的測試！現在讓我們前往第四步 雙路數據綁定以學會如何向手機應用添加排序功能。
程序員人生，我編程，我富裕，記住wfuyu網，php教程，php學習，php手冊，CMS模版制作
聲明：本站大部分內容是作者原創，少部分收集于互聯網供大家一起學習，原版權很多不明，如有侵權請聯系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有
