序言
本章我们将学习如果利用service在controller之间共享、传递数据。还将调整我们在不同状态下显示不同状态的任务数据清单的函数，将其从Controller层使用函数过滤改为View层使用Filter过滤器进行加工。
1. Service
1.1 什么是Service
首先我们要简单的说明一下什么是Service。Service是Angular中主要的组件之一，Service被认为一种可注入的对象。而根据注入的形式与方法不同，在Angualr1.x中Service主要以下几种形式出现:
而一般来说我们最常用的两种形式应该是
- service
- factory
简单来说service和factory的区别在于,service注入的是一个构造函数，而factory注入的是一个方法。所有的service都会以单例的模式存在整个angular上下文中。而根据单例整个特性，我们便可以在不同的controller操作service中同一数据副本。
1.2 交互原理
我们将通过新增一个TaskService来封装原先vm.tasks中的数据，在不同的controller中进行共享。
2. 使用TaskService来封装任务数据
2.1 新建TaskService
我们创建一个TaskService用来保存所有的tasks列表信息。
//services/task.service.sj
(function ()
{
'use strict';
angular
.module('todomvc')
.service('TaskService', TaskService);
TaskService.$inject = [];
function TaskService()
{
var service = {
tasks:[
{
title: "第一个任务",
completed: true
},
{
title: "第二个任务",
completed: false
}]
}
return service;
}
})();
我们为TaskService中增加一个属性字段tasks用于保存任务列表数据。
2.2 向TodoController中注入TasksService
原先我们的TodoController只注入了我们需要的$routeParam服务来获取ng-route框架传递的路径status参数。
TodoController.$inject = ['$routeParams'];
function TodoController($routeParams){
//...
}
现在我们额外想TodoController中注入TaskService。我们通过操作$inject数组来告知实际注入的服务，然后再在TodoController的声明签名部分增加对应的内部变量。
一定注意顺序要完全一致！
TodoController.$inject = ['$routeParams','TaskService'];
function TodoController($routeParams,TaskService){
//...
}
2.3 绑定Service中的tasks数组
原有的任务的列表绑定于controller中的tasks变量，现在我们调整赋值逻辑，让controller中的vm.tasks获取来自于TaskService中的tasks变量。这样便可以让不同的Controller都可以操作同一份数据副本。
function init(){
// var task = [...];
vm.status = $routeParams.status||"";
// vm.tasks = _filterDataByStatus(tasks,vm.status);
vm.tasks = _filterDataByStatus(TaskService.tasks,vm.status)
}
2.4 测试应用
我们就先调整着几行代码，然后刷新页面试一下。
我们添加一个新的任务，然后再使用底部状态过滤便签进行过滤。
切换状态标签，我们新添加的任务也在任务清单中。
虽然我们就只改了几行代码，但整个应用已经变得与预期的一样的。
但是现在还有一个小小的bug,便是当我们在completed页面对一个“已经被处理过的”tasks数组做操作的时候，newTask虽然是一个completed:false的状态但是还是会被增加到当前视图绑定的vm.tasks中。
如果继续使用Controller的数据过滤方案，则需要每次在不同页面对vm.tasks数组操作后重新激活过滤的条件的数组。
所以我们将使用Angular提供的Filter过滤器方案做前端视图的过滤。
3. Filter过滤器
3.1 什么是Filter
Angular中的Filter是一种对数据进行加工的组件，在View中通过"|"运算符进行操作，其本质是对左侧的输出结果做进一步的操作。
如对vm.tasks | filter:{completed:true}的表达式便是对vm.tasks中使用属性的过滤器，只显示 tasks中completed属性为true的条目。
3.2 根据状态对vm.tasks做过滤显示
首先，既然是做View层的过滤器方案，便需要将我们当前的路由获取的status与status的过滤器具体值传递给前端。我们调整下之前的_filterDataByStatus函数，将其调整会根据不同的status返回不同的过滤条件对象
function _filterDataByStatus(status){
if (status === 'active'){
return {completed:false};
}else if (status === 'completed'){
return {completed:true};
}else{
return {};
}
}
顺便将函数的名称变为更加贴近实际操作的_filterByStatus
function _filterByStatus(status){
//....
}
然后，调整init函数，将获取的statusFilter传递给View层
function init(){
vm.status = $routeParams.status||"";
vm.statusFilter =_filterByStatus(vm.status);
vm.tasks = TaskService.tasks;
}
我们新增了一个vm.statusFilter用于保存对应的过滤条件:
- 显示所有数据，则值为{}即不做任何过滤；
- 显示对应状态的数据，则值为{completed: true/false}则会对vm.tasks对应的completed字段做出对应的过滤操作。
最后,我们调整View中的vm,tasks的ng-repeat指令，在其之后增加过滤器操作，在其做出渲染前对数据几个做出加工即只显示对应过滤条件的数据。
<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应用的基本功能都完成了。可是唯一的问题是，现在的Todos一旦进行了刷新操作，则数据就会全部消失了，缺少了所谓“持久化”的操作。
下一章节中，我们将使用Html5中本地存储接口将任务数据存储到浏览器的localStorage中，使其就算关闭了浏览器，数据也不会消失的效果。
