序言

本章我们将学习如果利用service在controller之间共享、传递数据。还将调整我们在不同状态下显示不同状态的任务数据清单的函数，将其从Controller层使用函数过滤改为View层使用Filter过滤器进行加工。

1. Service

1.1 什么是Service

首先我们要简单的说明一下什么是Service。Service是Angular中主要的组件之一，Service被认为一种可注入的对象。而根据注入的形式与方法不同，在Angualr1.x中Service主要以下几种形式出现:

Angular Service结构

而一般来说我们最常用的两种形式应该是

1. service
2. factory
   简单来说service和factory的区别在于,service注入的是一个构造函数，而factory注入的是一个方法。所有的service都会以单例的模式存在整个angular上下文中。而根据单例整个特性，我们便可以在不同的controller操作service中同一数据副本。

1.2 交互原理

使用Service在Controller之间共享数据

我们将通过新增一个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)
        }

Paste_Image.png

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中，使其就算关闭了浏览器，数据也不会消失的效果。