Angular----功能介绍之-------组件与过滤器

最新推荐文章于 2019-05-09 18:10:49 发布

狼行千里d

最新推荐文章于 2019-05-09 18:10:49 发布

阅读量358

点赞数

文章标签： angularjs 前端框架模块化

本文链接：https://blog.csdn.net/wq656774/article/details/70875851

版权

******你还在为html里面繁杂的布局、繁琐的代码杂乱无章而烦恼吗，看完这些我想你可以放下你的忧愁，你的不满，你会体会到夕阳洒在你的脸上所带来的快乐和满足。******

组件化：

			组件（Component）是对数据和方法的简单封装。

			    把复杂系统拆分成多个组件，分离组件边界和责任，便于独立升级和维护。

将页面中可以重复使用的标签封装成一个组件，方便这一部分UI重复使用

类似于JS中的函数，封装了一部分处理代码，通过函数调用就可以重复使用这些代码.

下面简单介绍一下组件化的写法：

<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
<my-comp></my-comp> ------只需要写一个标签就行了
<script>
var app = angular.module("myApp", []);
app.component("myComp", { -------“myComp”就是上方标签的名字
template:"<h1>天时地利人和</h1>" -------template这里可以写成 templateUrl：后面接的

是页面链接地址。可以再链接的页面写上你需要显示的

内容，可以在里面直接修改样式。
});
</script>
</body>
</html>

这是一个比较简单的写法，还可以用外链的方式写js，这样页面就变得更清晰，更简洁。

过滤器：AngularJS 过滤器可用于转换数据；

过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中；

常用的过滤器有：

currency	格式化数字为货币格式。
filter	从数组项中选择一个子集。
lowercase	格式化字符串为小写。
orderBy	根据某个表达式排列数组。
uppercase	格式化字符串为大写。

下面简单介绍一下这些过滤器的写法：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/lib/angular.min.js"></script>
</head>
<body>
    <div ng-controller="myCtrl">
       货币过滤器 <span ng-bind="price|currency:'￥':3"></span>
        <div>
            时间过滤器 <span ng-bind="date"></span><br>
             <span ng-bind="date|date"></span><br>
             <span ng-bind="date|date:'yyyy年mm月dd日hh时mm分ss秒'"></span><br>
             <span ng-bind="date|date:'hh时mm分ss秒'"></span><br>

        </div>
        <div>
                <p>
                    <input type="text" ng-model="keyword">
                </p>
            关键词过滤器
            <ul ng-repeat="g in users|filter:keyword">
                <li ng-bind="g.userID"></li>
                <li ng-bind="g.username"></li>
                <li ng-bind="g.nickname"></li>


            </ul>
        </div>
        <div>

		大写字母过滤器
            <span ng-bind="name|uppercase"></span>
        </div>
        <div>
            <p>
                <input type="text" ng-model="keyword">
                <input type="checkbox" ng-model="RR">
            </p>
            排序，关键词过滤器
            <ul ng-repeat="g in users|orderBy:keyword:RR|filter:keyword">
                <li ng-bind="g.userID"></li>
                <li ng-bind="g.username"></li>
                <li ng-bind="g.nickname"></li>
            </ul>
        </div>
    </div>

</body>
<script>
    var app=angular.module("myApp",[]);
    app.controller("myCtrl",["$scope",function ($scope) {
        $scope.price=12.2055
        $scope.name="yuenfejh"
        $scope.date=new Date()
        $scope.users = [
            {userID:1, username:"cat", nickname:"tom"},
            {userID:2, username:"dog", nickname:"shuke"},
            {userID:3, username:"mouse", nickname:"jerry"},
            {userID:4, username:"bajie", nickname:"悟能"},
            {userID:5, username:"houge", nickname:"悟空"},

        ]
    }])
</script>
</html>

自定义过滤器：

		app.filter(name, fn):用于定义一个自定义过滤器；

		name:过滤器名称
    	        fn:过滤器处理函数

去重：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/lib/angular.min.js"></script>
</head>
<body>
    <div ng-controller="myCtrl">
        <span ng-bind="name|mycolor"></span>
    </div>
</body>
<script>
    var app=angular.module("myApp",[]);
    app.filter("mycolor",function () {
        return function (value) {	-----过滤器中，直接return function(value) {}
					-----通过闭包函数来实现数据处理，固定语法结构！
						 ------value参数：第一个参数，用于接收要处理的数据：
							数据就是过滤器管道符前面变量中的数据；
            for(var i=0;i<=value.length-1;i++){
                for(var j=i+1;j<=value.length-1;j++){
                    if(value[i]==value[j]){
                        value.splice(j,1)
			j--
                    }
                }
            }
            return value		-----过滤器中数据处理完成，一定要返回输出
        }
    })
    app.controller("myCtrl",function ($scope) {
        $scope.name=[
                1,2,4,2,6,8,1,4,9,3,6
        ]
    })
</script>
</html>

狼行千里d

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular----功能介绍之-------组件与过滤器

******你还在为html里面繁杂的布局、繁琐的代码杂乱无章而烦恼吗，看完这些我想你可以放下你的忧愁，你的不满，你会体会到夕阳洒在你的脸上所带来的快乐和满足。******组件化：组件（Component）是对数据和方法的简单封装。把复杂系统拆分成多个组件，分离组件边界和责任，便于独立升级和维护。将页面中可以重复使用的标签封装成一个
复制链接

扫一扫