3.Angular框架-angular过滤器、service 服务、ngRoute -路由

1.1. TodoMVC案例

• todomvc官网
• todomvc素材

1.1.1. 功能划分

1 展现任务列表
2 添加任务
3 删除一条任务
4 修改任务
5 切换任务选中状态(单个或批量)
6 清除已完成任务
7 显示未完成任务数
8 显示不一样状态的任务
    以及当前任务高亮处理
9 根据URL变化显示相应任务
11 使用服务抽象数据模型管理
12 使用路由完成不一样任务的切换

1.1.2. $location.url()

• 做用：用于获取页面中的锚点值，不包含：#
• 注意：$location 与 $scope同样，都须要经过注入的方式传入

URL是： file:///F:/Angular_File/todomvc/index.html#/completed

经过调用 $location.url() 方法获取的是：'/completed'

1.2. 过滤器

• 做用：格式化数据/筛选数据的小工具
• 语法：在数据模型的后面加上 | 过滤器名称: 参数
• 说明：过滤器经过 | 指定，参数经过 : 指定

1.2.1. 格式化数据过滤器

• 做用：对数据进行格式化，以某种指定的格式输出

1.2.1.1. filter过滤器 -过滤数据

• 做用：对数据进行过滤，从多条数据中筛选出符合规则的数据
• 参数：
  • 基本类型参数：angular会根据参数对数据进行全局匹配
  • 对象类型参数：根据参数对象中的属性对数据进行匹配，只会匹配指定的属性
• 注意：配合track by使用的时候，track by 要放在最后面

<!-- 取出 completed 属性为：true 的数据 -->
<p ng-repeat="item in data | filter:{completed: true} track by $index"></p>

<script>
app.controller('FilterController', ['$scope', '$filter', 
    function($scope, $filter) {
        $scope.data = [
            {name: '吃饭', completed: true },
            {name: '睡觉', completed: false },
            {name: '豆豆', completed: true }
        ];
    }]);
</script>

1.2.1.2. currency 过滤器

• 做用：将数字转化为货币的形式显示

<p>{{12345678.333 | currency: "￥"}}</p>

1.2.1.3. date 过滤器

• 做用：将整数形式的日期转化为经常使用日期形式

<p>{{1412345678901 | date: "yyyy-MM-dd hh:mm:ss"}}</p>

1.2.1.4. limitTo 过滤器

• 做用：限制显示的文字个数
• 参数：:5 表示展现文字长度为：5，:2 表示开始的索引号

<p>{{'是谁在唱歌，温暖了寂寞' | limitTo:5:2}}</p>

1.2.1.5. orderBy 过滤器

• 做用：对数据进行排序
• 参数：排序的属性，若是是倒序排列，属性名前加-，例如：-age
• 说明：通常与 ng-repeat 指令共同使用

<p ng-repeat="item in data | orderBy: 'age'"></p>

1.2.2. 在JavaScript中使用过滤器

• 语法：
• 使用 $filter 方法,参数为：过滤器名称
• $filter方法的返回值是一个方法：第一个参数表示要过滤的数据，后面的参数为：过滤器的参数

var time = $filter("date")($scope.curDate, "yyyy-MM-dd hh:mm:ss");

1.3. service 服务

• 公用（公共）的业务逻辑集中存放的一段代码
• 主要用于对重复业务的封装，达到复用的目的
• 通常主要封装针对于Model的CRUD
• 服务中的代码只会在使用服务的时候，执行一次，而且只会执行一次
• 服务给控制器提供了一些额外的功能
  • $log / $http 等以$开头的服务都是Angular的内置服务

1.3.1. 建立服务

• 建立服务的语法，与建立控制器的语法相同
• service方法中的函数参数，是一个构造函数，经过this添加成员
• 控制器中经过服务的名字（实例对象）就可使用服务的属性和方法

app.service('TestService', [function() {
    // this.get = function() {};
    // this.set = function() {};
    // this.update = function() {};
    // this.delete = function() {};
}]);

// 在控制器中使用自定义服务
app.controller('DemoController', ['$scope', 'TestService', 
    function($scope, TestService) {
    console.log(TestService);
}]);

1.3.2. 模块之间的依赖关系

有三个模块：
1 app.js：主模块，应用程序的入口，实现统一调用全部其余模块
2 controller.js：控制器模块，处理视图中与用户交互的功能，即：处理业务逻辑
3 service.js：服务模块，抽象数据操做，提供数据的增删改查

每一个模块都会放在一个独立的js文件中，所以，每一个文件都会有一个模块，
    即：angular.module("模块名", []);
创建模块之间的联系：
    在 app.js 主模块中，引入：controller 和 service这两个模块

1.4. ngRoute -路由

• 语法：app.config(['$routeProvider', function($routeProvider) {}])
• 安装：npm install angular-route 单独安装
• 注意：ngRoute -路由模块名称，做为依赖模块

1.4.1. 使用步骤

• 1 引入 angular-route.js 文件
• 2 建立模块的时候，将ngRoute做为依赖项引入
• 3 经过调用模块的config方法来配置路由，并将$routeProvider注入进来
• 4 经过$routeProvider的两个方法：when()和otherwise()进行路由配置
• 5 在视图中，经过指令ng-view展现路由对应的内容
• 6 1.6 版本之后，添加 $locationProvider.hashPrefix('') 配合 #/users 使用

<div ng-app="routeApp">
    <a href="#/stu/li"></a>
    <p>a</p>
    <p>b</p>
    <div ng-view></div>
    <p>c</p>
    <p>d</p>
</div>

<script>
    var app = angular.module('routeApp', ['ngRoute']);
    app.config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/stu/li', {
            template: '<p>李四</p>'
        });
    }]);
</script>

1.4.2. when() 方法

• 参数：

  • 第一个参数：url的hash值，例如：/stu/li
  • 第二个参数：是一个对象，对象中属性用来控制路由的相关功能

• template：指定路由的模板，显示在ng-view指令全部的html元素中

• templateUrl: 做用与 template 相同，取值：模板id 或者 路径
• controller: 为路由指定一个控制器，用于提供当前视图中的数据模型

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/stu/li', {
        template: '<p>你好，我是{{name}}</p>',
        controller: 'stuController'
    });
}]);

app.controller('stuController', ['$scope', function($scope) {
    $scope.name = '小明';
}]);

1.4.3. otherwise() 方法

• 做用：匹配不合法（when没法匹配）的锚点值，与switch-case中的 default 相似
• 参数: 是一个对象
• redirectTo属性：指定默认跳转的锚点值

$routeProvider
    .otherwise({
        redirectTo: '/stu/'
    });

1.4.4. $routeParams -路由的服务

• 做用：用于获取路由的参数，是 路由服务，在控制器中使用
• ":name?" 的 ":name"用于匹配URL路径，"?"表示能够省略
• 例如URL为 "#/stu/lisi" ，路由 "/stu/:name" 匹配：lisi

app.config(['$routeProvider', function($routeProvider) {
    // '/stu/:name?' 用来匹配：/stu/ 或 /stu 或 /stu/xxx 的任意一种
    $routeProvider.when('/stu/:name?', {
        template: '<p>你好，我是{{name}}</p>',
        controller: 'stuController'
    });
}]);

app.controller('stuController', ['$scope', '$routeParams', function($scope, $routeParams) {
    // $routeParams 是一个对象，对象中包含了一个 name 属性。
    // name属性，是路由的 when 方法的第一个参数
    console.log($routeParams.name);
}]);

1.4.5. $route -路由的服务

• 做用：控制当前的路由
• $route.updateParams()方法：更新路由参数的值
  • 参数：对象，具备路由参数属性，用于指定更新后的锚点值
• 可使用 $location.url('/teacher/laowang') 来修改，路由的URL值

app.controller('stuController', ['$scope', '$routeProvider', '$route', function($scope, $routeProvider, $route) {
    console.log($routeProvider.name);

    // 参数是一个对象，具备路由参数属性的对象
    $route.updateParams({name: 'lisi'});
}]);

1.4.6. hashPrefix

• 在 angular-1.6以上的版本，默认使用 ! 前缀

<a href="#!/users"></a>

<script>
$routeProvider
    .when('/users', {
        templateUrl: 'view.html',
        controller: 'TestController'
    })

// 1.6以上，默认值为：'!'
// $locationProvider.hashPrefix('!');
</script>