AngularJS 组件化和过滤器简介

最新推荐文章于 2024-06-25 09:46:27 发布

chun_前端

最新推荐文章于 2024-06-25 09:46:27 发布

阅读量302

点赞数

文章标签： angularjs 框架经验过滤器内置过滤器

本文链接：https://blog.csdn.net/chun312193/article/details/70861909

版权

通过公司最近需要使用AngularJS框架所以我就在使用的脱坑的经验写一下：

之前我们已经介绍过AngularJS现在就开始说一下我用的AngularJS组件化:

组件化概述：

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

1.网页结构和组件化：

常规的网页开发时，网页的大概结构是什么样的？

1.上中下：上下结构内容不改变中间的内容发生改变

2.左中右：左右结构内容保持不变中间的内容发生改变

下边写一个简单的组件化：

<!DOCTYPE html>
<html ng-app="App">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/angularjs/angular.min.js"></script>
</head>
<body>
  <com></com>
</body>
<script>
    var a=angular.module("App",[]);
    a.component("com",{
        template:"<p>简单的组件化<a href='index.html'>这是链接</a></p>"
    })
</script>
</html>

复杂的组件化就是需要建立几个文件夹：

1、第一步创建一个index文件然后创建一个js文件然后在创建两个以上的index文件

2、第二步：第一个index里面需要写的内容如下：

<!DOCTYPE html>
<html ng-app="App">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/angularjs/angular.min.js"></script>
    <script src="js/app/index4.js"></script>
</head>
<body>
<div class="center">
    <com></com>
    <com1></com1>
    <com3></com3>
    <com2></com2>
</div>
</body>
</html>

3、第三步：在js里面写的代码如下：

var a=angular.module("App",[]);
a.component("com",{
    templateUrl:"js/app/index4tou/index4tou.html",这个是你要链接的上边的index的地址
    controller:function($scope) {
        $scope.hell="name"
   }
})
a.component("com1",{
    templateUrl:"js/app/index4shen/index4shen.html",这个是你要链接的左边的index的地址
    controller:function($scope) {
        $scope.hell="name"
    }
})
a.component("com2",{
    templateUrl:"js/app/index4wei/index4wei.html",这个是你要链接的下边的index的地址
    controller:function($scope) {
        $scope.hell="name"
    }
})

4.第四步：在你连接的三个index里面写你要在页面上显示的内容也可以加样式下边我就写一个index里面的样式：

<div class="index4tou">
    页面头部
    {{hell}}
    <div class="zhong">
        <ul class="zhongul">
            <li>首页</li>
            <li>链接</li>
            <li>商品</li>
            <li>详情</li>
        </ul>
    </div>
</div>
<style>
    .index4tou{
        width: 100%;
        height:100px;
        background: yellow;
        color: red;
    }
    .zhong{
        width: 200px;
        background: blue;
        color: #fff;
    }
    .zhongul{
        font-size: 0;
    }
    .zhongul li{
        display: inline-block;
        width: 50px;
        font-size: 16px;
        text-align: center;
        background: red;
    }
</style>

其他的样式自己可以随意加。

什么是过滤器：

过滤器（filter）正如其名，作用就是接收一个输入，通过某个规则进行处理，然后返回处理后的结果。主要用在数据的格式化上，例如获取一个数组中的子集，对数组中的元素进行排序等。ng内置了一些过滤器，它们是：currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。总共九种。除此之外还可以自定义过滤器，这个就强大了，可以满足任何要求的数据处理。

2.过滤器的使用：

过滤器分为两种：

1、内置过滤器

2、自定义过滤器

内置过滤器：

currency：货币过滤器

使用currency可以将数字格式化为货币，默认是美元符号，你可以自己传入所需的符号，例如我传入人民币：

<span ng-bind="price|currency:'￥'"></span>

date：日期和时间过滤器

日期格式化：通常情况下，需要按照用户的要求进行输出，这时候就会附带参数
y/M/d/h/m/s/E 年/月/日/时/分/秒/星期

<span ng-bind="data|date"></span>没有加参数的日期和时间过滤器
<span ng-bind="data|date:'yyyy年MM月dd日'"></span>加入参数指定的年月日过滤器
<span ng-bind="data|date:'yyyy年MM月dd日 hh:mm:ss'"></span>加入参数指定的年月日时分秒的过滤器
<span ng-bind="data|date:'hh:mm:ss'"></span>加入参数指定的时分秒的过滤器

filter：过滤输入输入关键字可以过滤一下

这个名叫filter的filter（不得不说这名字起的，真让人容易混淆——！）用来处理一个数组，然后可以过滤出含有某个子串的元素，作为一个子数组来返回。可以是字符串数组，也可以是对象数组。如果是对象数组，可以匹配属性的值。它接收一个参数，用来定义子串的匹配规则。

$scope.childrenArray = [
        {name:'kimi',age:3},
        {name:'cindy',age:4}, {name:'anglar',age:4}, {name:'shitou',age:6}, {name:'tiantian',age:5} ];

$scope.func = function(e){return e.age>4;}

{{ childrenArray | filter : 'a' }} //匹配属性值中含有a的
{{ childrenArray | filter : 4 }}  //匹配属性值中含有4的 {{ childrenArray | filter : {name : 'i'} }} //参数是对象，匹配name属性中含有i的

limitTo：长度限制过滤器

limitTo过滤器用来截取数组或字符串，接收一个参数用来指定截取的长度。

用法：

{{ childrenArray | limitTo : 2 }}  //将会显示数组中的前两项

uppercase：把字符串全部转换成大写

lowercase：把字符串全部转换成小写

JSON：把数据中的对象，转换成JSON字符串的格式输出展示到页面上经常能用于代码程序调试，使用较少！

用法如下：

<span ng-bind="jsonTest | json"></span>

orderBy：排序

orderBy过滤器可以将一个数组中的元素进行排序，接收一个参数来指定排序规则，参数可以是一个字符串，表示以该属性名称进行排序。可以是一个函数，定义排序属性。还可以是一个数组，表示依次按数组中的属性值进行排序

自定义过滤器标准格式：

 var app = angular.module("myApp", []);
app.filter(name, fn):/*
用于定义一个自定义过滤器name过滤器名称fn:过滤器处理函数*/
app.filter("myfilter", function() { /*过滤器中，直接return function(value) {}通过闭包函数来实现数据处理，固定语法结构！value参数：第一个参数，用于接收要处理的数据：数据就是过滤器管道符前面变量中的数据 */
return function(value) {

/*闭包函数中的value就是过滤器接收到的数据|就是准备过滤的数据*/value = value.toUpperCase();/* 过滤器中数据处理完成，一定要返回输出*/ return value; }}); app.controller("myCtrl", function($scope) { $scope.name = "jerry";});




自定义过滤器：下边是自定过滤大小写过滤器

<!DOCTYPE html>
<html ng-app="App">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/angularjs/angular.min.js"></script>
</head>
<body>
  <div ng-controller="my">
      {{name}}
      <span ng-bind="name|ziding"></span>
      <span ng-bind="name|xiaoxie"></span>
  </div>
</body>
<script>
    var a=angular.module("App",[]);
    a.filter("ziding",function () {
        return function (value) {
            value=value.toUpperCase();
            return value;
        }

    })
    a.filter("xiaoxie",function () {
        return function (value) {
            value=value.toLowerCase();
            return value;
        }

    })
    a.controller("my",function ($scope) {
        $scope.name="JerrY"
    })
</script>
</html>