AngularJs中组件、过滤器、自定义过滤器的使用

关于组件化：

    将页面中可以重复使用的标签封装成一个组件，方便这一部分UI重复使用
    类似于JS中的函数，封装了一部分处理代码，通过函数调用就可以重复使用这些代码
封装一个简单的组件代码如下：

<script>
    var app = angular.module("myApp", []);

    app.component("myComp", {
        template:"<h1>组件化封装的内容<small>这是一个副标题small>h1>"
    });
script>

调用方式：

<my-comp>my-comp>

过滤器： 过滤器可以使用一个管道字符（|）添加到表达式和指令中。 （1）字符串大小写转换过滤器 代码如下：

<div ng-bind="name">div>
        <div ng-bind="name | uppercase">div>
        <div ng-bind="name | lowercase">div>

（2）长度限制过滤器

      代码如下：

长度：<input type="text" ng-model="length"><br />
位置：<input type="text" ng-model="index">
<br />
<ul>
    <li ng-repeat="u in users | limitTo:length:index">
        <span ng-bind="u.userID">span>****
        <span ng-bind="u.username">span>****
        <span ng-bind="u.nickname">span>
    li>
ul>

（3）JSON过滤器 代码如下：

<span ng-bind="users|json">span>

（4）日期时间过滤器

<span ng-bind="date | date:'yyyy年MM月dd日 hh:mm:ss'">span><br />
            <span ng-bind="date | date:'yyyy年MM月dd日'">span><br />
            <span ng-bind="date | date:'hh:mm:ss'">span><br />

（5）货币格式过滤器

货币过滤器输出：<span ng-bind="price | currency">span><br />
货币过滤器输出：<span ng-bind="price | currency:'人民币￥'">span><br />
货币过滤器输出：<span ng-bind="price | currency:'￥':3">span><br />

自定义过滤器：

 app.filter(name, fn):用于定义一个自定义过滤器
 name:过滤器名称
 fn:过滤器处理函数

 过滤器中，直接return function(value) {}
 通过闭包函数来实现数据处理，固定语法结构！
 value参数：第一个参数，用于接收要处理的数据：数据就是过滤器管道符前面变量中的数据

<div ng-controller="myCtrl">
    <div ng-bind="name">div>
    <div ng-bind="name | myfilter">div>
div>

var app = angular.module("myApp", []);
    app.filter("myfilter", function() {
        return function(value) {
            value = value.toUpperCase();
            return value;
        }
    });

app.controller("myCtrl", function($scope) {
        $scope.name = "jerry";
    });

标注：过滤器中的数据处理完成，一定要返回输出（return value）。否则页面上不会输出相关的信息。