序言
本章我們將學(xué)習(xí)如果利用service在controller之間共享化借、傳遞數(shù)據(jù)姚建。還將調(diào)整我們?cè)诓煌瑺顟B(tài)下顯示不同狀態(tài)的任務(wù)數(shù)據(jù)清單的函數(shù)，將其從Controller層使用函數(shù)過(guò)濾改為View層使用Filter過(guò)濾器進(jìn)行加工。
1. Service
1.1 什么是Service
首先我們要簡(jiǎn)單的說(shuō)明一下什么是Service鸣皂。Service是Angular中主要的組件之一摔踱，Service被認(rèn)為一種可注入的對(duì)象虐先。而根據(jù)注入的形式與方法不同，在Angualr1.x中Service主要以下幾種形式出現(xiàn):
而一般來(lái)說(shuō)我們最常用的兩種形式應(yīng)該是
- service
- factory
簡(jiǎn)單來(lái)說(shuō)service和factory的區(qū)別在于,service注入的是一個(gè)構(gòu)造函數(shù)派敷，而factory注入的是一個(gè)方法蛹批。所有的service都會(huì)以單例的模式存在整個(gè)angular上下文中。而根據(jù)單例整個(gè)特性篮愉，我們便可以在不同的controller操作service中同一數(shù)據(jù)副本腐芍。
1.2 交互原理
我們將通過(guò)新增一個(gè)TaskService來(lái)封裝原先vm.tasks中的數(shù)據(jù)，在不同的controller中進(jìn)行共享试躏。
2. 使用TaskService來(lái)封裝任務(wù)數(shù)據(jù)
2.1 新建TaskService
我們創(chuàng)建一個(gè)TaskService用來(lái)保存所有的tasks列表信息猪勇。
//services/task.service.sj
(function ()
{
'use strict';
angular
.module('todomvc')
.service('TaskService', TaskService);
TaskService.$inject = [];
function TaskService()
{
var service = {
tasks:[
{
title: "第一個(gè)任務(wù)",
completed: true
},
{
title: "第二個(gè)任務(wù)",
completed: false
}]
}
return service;
}
})();
我們?yōu)門askService中增加一個(gè)屬性字段tasks用于保存任務(wù)列表數(shù)據(jù)。
2.2 向TodoController中注入TasksService
原先我們的TodoController只注入了我們需要的$routeParam服務(wù)來(lái)獲取ng-route框架傳遞的路徑status參數(shù)颠蕴。
TodoController.$inject = ['$routeParams'];
function TodoController($routeParams){
//...
}
現(xiàn)在我們額外想TodoController中注入TaskService泣刹。我們通過(guò)操作$inject數(shù)組來(lái)告知實(shí)際注入的服務(wù)，然后再在TodoController的聲明簽名部分增加對(duì)應(yīng)的內(nèi)部變量裁替。
一定注意順序要完全一致项玛！
TodoController.$inject = ['$routeParams','TaskService'];
function TodoController($routeParams,TaskService){
//...
}
2.3 綁定Service中的tasks數(shù)組
原有的任務(wù)的列表綁定于controller中的tasks變量，現(xiàn)在我們調(diào)整賦值邏輯弱判，讓controller中的vm.tasks獲取來(lái)自于TaskService中的tasks變量襟沮。這樣便可以讓不同的Controller都可以操作同一份數(shù)據(jù)副本。
function init(){
// var task = [...];
vm.status = $routeParams.status||"";
// vm.tasks = _filterDataByStatus(tasks,vm.status);
vm.tasks = _filterDataByStatus(TaskService.tasks,vm.status)
}
2.4 測(cè)試應(yīng)用
我們就先調(diào)整著幾行代碼昌腰，然后刷新頁(yè)面試一下开伏。
我們添加一個(gè)新的任務(wù)，然后再使用底部狀態(tài)過(guò)濾便簽進(jìn)行過(guò)濾遭商。
切換狀態(tài)標(biāo)簽固灵，我們新添加的任務(wù)也在任務(wù)清單中。
雖然我們就只改了幾行代碼劫流，但整個(gè)應(yīng)用已經(jīng)變得與預(yù)期的一樣的巫玻。
但是現(xiàn)在還有一個(gè)小小的bug,便是當(dāng)我們?cè)赾ompleted頁(yè)面對(duì)一個(gè)“已經(jīng)被處理過(guò)的”tasks數(shù)組做操作的時(shí)候，newTask雖然是一個(gè)completed:false的狀態(tài)但是還是會(huì)被增加到當(dāng)前視圖綁定的vm.tasks中祠汇。
如果繼續(xù)使用Controller的數(shù)據(jù)過(guò)濾方案仍秤，則需要每次在不同頁(yè)面對(duì)vm.tasks數(shù)組操作后重新激活過(guò)濾的條件的數(shù)組。
所以我們將使用Angular提供的Filter過(guò)濾器方案做前端視圖的過(guò)濾可很。
3. Filter過(guò)濾器
3.1 什么是Filter
Angular中的Filter是一種對(duì)數(shù)據(jù)進(jìn)行加工的組件诗力，在View中通過(guò)"|"運(yùn)算符進(jìn)行操作，其本質(zhì)是對(duì)左側(cè)的輸出結(jié)果做進(jìn)一步的操作我抠。
如對(duì)vm.tasks | filter:{completed:true}的表達(dá)式便是對(duì)vm.tasks中使用屬性的過(guò)濾器苇本，只顯示 tasks中completed屬性為true的條目袜茧。
3.2 根據(jù)狀態(tài)對(duì)vm.tasks做過(guò)濾顯示
首先，既然是做View層的過(guò)濾器方案瓣窄，便需要將我們當(dāng)前的路由獲取的status與status的過(guò)濾器具體值傳遞給前端笛厦。我們調(diào)整下之前的_filterDataByStatus函數(shù)，將其調(diào)整會(huì)根據(jù)不同的status返回不同的過(guò)濾條件對(duì)象
function _filterDataByStatus(status){
if (status === 'active'){
return {completed:false};
}else if (status === 'completed'){
return {completed:true};
}else{
return {};
}
}
順便將函數(shù)的名稱變?yōu)楦淤N近實(shí)際操作的_filterByStatus
function _filterByStatus(status){
//....
}
然后康栈，調(diào)整init函數(shù)递递，將獲取的statusFilter傳遞給View層
function init(){
vm.status = $routeParams.status||"";
vm.statusFilter =_filterByStatus(vm.status);
vm.tasks = TaskService.tasks;
}
我們新增了一個(gè)vm.statusFilter用于保存對(duì)應(yīng)的過(guò)濾條件:
- 顯示所有數(shù)據(jù)，則值為{}即不做任何過(guò)濾啥么；
- 顯示對(duì)應(yīng)狀態(tài)的數(shù)據(jù)登舞，則值為{completed: true/false}則會(huì)對(duì)vm.tasks對(duì)應(yīng)的completed字段做出對(duì)應(yīng)的過(guò)濾操作。
最后,我們調(diào)整View中的vm,tasks的ng-repeat指令悬荣，在其之后增加過(guò)濾器操作菠秒，在其做出渲染前對(duì)數(shù)據(jù)幾個(gè)做出加工即只顯示對(duì)應(yīng)過(guò)濾條件的數(shù)據(jù)。
<ul id="todo-list">
{{}}
<li ng-repeat="task in vm.tasks|filter:vm.statusFilter " ng-class="{completed: task.completed, editing: task === vm.editedTask}">
//....
</li>
</ul>
到這里氯迂，Todos應(yīng)用的基本功能都完成了践叠。可是唯一的問(wèn)題是嚼蚀，現(xiàn)在的Todos一旦進(jìn)行了刷新操作禁灼，則數(shù)據(jù)就會(huì)全部消失了，缺少了所謂“持久化”的操作轿曙。
下一章節(jié)中弄捕，我們將使用Html5中本地存儲(chǔ)接口將任務(wù)數(shù)據(jù)存儲(chǔ)到瀏覽器的localStorage中，使其就算關(guān)閉了瀏覽器导帝，數(shù)據(jù)也不會(huì)消失的效果守谓。
