AngularJS的组件化、过滤器、自定义过滤器之旅
来源：互联网 发布：js toggleclass 编辑：程序博客网 时间：2024/06/06 07:41
在现在的常规网页中，网页结构一般分为4种：上中下、左中右、上下、左右；一般中间的部分是发生改变的，而上下结构是不发生变动的。还有一些网页的设计很奇特，已进入网页，就会被网页中的各个功能所吸引，然而查看网页的源代码的时候，则发现它编写的代码很短，却实现了许多功能，要追其原因，那就是web前端工程师利用了AngularJS中的组件完成了这些。那么我接下来就说说我自己总结的AngularJS的组件化封装、过滤器的相关知识。。。。。。
一、组件化
什么是组件化？
AngularJ作为一个模块化组件开发的web前端框架，对于视图进行组件化封装以达到重要的目的，是它非常优秀的一个亮点。
组件化<component>:组件化是将页面中一部分UI封装起来进行重复使用，UI中的数据可以是不同的，甚至组件中可以对UI进行适当的业务逻辑处理，如链接跳转、数据运算等等。
组件选项：(1)template:组件替换模板字符串；(2)templateUrl:组件替换html模板页面；(3)controller:组件控制器。
例子：进行一个简单的组件:
<!DOCTYPE html><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><my-comp></my-comp><my-comp></my-comp><my-comp></my-comp><script> var app = angular.module("myApp", []); // 封装一个简单的组件 app.component("myComp", { template:"<h1>组件化封装的内容<small>这是一个副标题</small></h1>" });</script></body></html>下面写一个组件化模板：<!DOCTYPE html><html ng-app="myApp"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/lib/AngularJS/angular.min.js"></script> <script src="js/app/index3/index3.js"></script></head><body> <goodslist></goodslist> <ul> <li>测试内容</li> <li>测试内容</li> <li>测试内容</li> </ul></body></html>var app = angular.module("myApp", []);app.component("goodslist", { /*指定了组件使用的模板页面*/ templateUrl:"js/app/index3/partials/goodsList.html", /*指定了组件使用的控制器*/ controller:function($scope) { $scope.goodses = [ {goodsID:1, goodsName:"商品A", goodsPrice:44}, {goodsID:2, goodsName:"商品B", goodsPrice:59}, {goodsID:3, goodsName:"商品C", goodsPrice:449} ] }});<ul class="gl-goodslist"> <li class="gl-goodslist-item" ng-repeat="g in goodses"> <span ng-bind="g.goodsID"></span>**** <span ng-bind="g.goodsName"></span>**** <span ng-bind="g.goodsPrice"></span>**** </li></ul><style> .gl-goodslist{ list-style:none; } .gl-goodslist > .gl-goodslist-item{ font-size:18px; color:orange; }</style>通过这个组件化模型，我们可以看出，HTML里减少了代码量，优化了代码，通过外链式的方式引入，给人一种简洁、整齐的感觉，让人一看就很舒服。通过这个例子，我们也可以看出组件化的操作编写步骤：
在这个例子中，补充一些组件样式的知识：
(1)定义组件的个性化样式：采用的是默认样式；
(2)使用的时候，尽量不要使用页面中的标签选择器等等，很容易影响全局样式；
(3)独立组件的样式定义，通常以class名称+组件名称来定义，这样就可以将样式独立出来；
(4)组件化开发时，建议将当前组件的样式和标签写在一个文件中；
(5)组件越小越能重复使用越好!
网页开发与组件化开发时的区别：
常规网页开发时，为了方便项目后期维护，将HTML.CSS/JS代码分离；
组件化开发时，为了方便组件的后期维护，将HTML/CSS通常会写在一个页面中。
二、过滤器 、 自定义过滤器
二、过滤器 、 自定义过滤器
什么是过滤器
（filter）
？过滤器（filter）正如其名，作用就是接收一个输入，通过某个规则进行处理，然后返回处理后的
结果。主要用在数据的格式化上，例如获取一个数组中的子集，对数组中的元素进行排序等。
AngularJS中ng内置了一些过滤器：
(1)currency (货币处理);
(2)date (日期格式化);
(2)date (日期格式化);
(3)filter(匹配子串);
(4)json(格式化json对象);
(5)limitTo(限制数组长度或字符串长度);
(6)lowercase(小写)、uppercase(大写);
(6)lowercase(小写)、uppercase(大写);
(7)number(格式化数字);
(8)orderBy(排序);
过滤器入门案例：
(8)orderBy(排序);
过滤器入门案例：
<!DOCTYPE html><html ng-app="myApp"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/lib/AngularJS/angular.min.js"></script></head><body><div ng-controller="myCtrl"> <div> <h3>排序输出</h3> 排序关键词：<input type="text" ng-model="keyword"> 排序顺序：<input type="checkbox" ng-model="sort">倒序 <br /> <ul> <li ng-repeat="u in users | orderBy:keyword:sort"> <span ng-bind="u.userID"></span>**** <span ng-bind="u.username"></span>**** <span ng-bind="u.nickname"></span> </li> </ul> </div> <div> <h3>字符串大小写转换过滤器</h3> <div ng-bind="name"></div> <div ng-bind="name | uppercase"></div> <div ng-bind="name | lowercase"></div> </div> <div> <h3>长度限制过滤器</h3> 长度：<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> </div> <div> <h3>JSON过滤器</h3> <p> 把数据中的对象，转换成JSON字符串的格式输出展示到页面上 经常能用于代码程序调试，使用较少！ </p> <span ng-bind="users|json"></span> </div> <div> <h3>过滤输出</h3> 关键词：<input type="text" ng-model="keyword"> <br /> <ul> <li ng-repeat="u in users | filter:keyword"> <span ng-bind="u.userID"></span>**** <span ng-bind="u.username"></span>**** <span ng-bind="u.nickname"></span> </li> </ul> </div> <div> <h3>日期时间过滤器</h3> <div> 原始输出：<span ng-bind="date"></span> </div> <div> 日期格式化：<span ng-bind="date | date"></span> </div> <div> 日期格式化：通常情况下，需要按照用户的要求进行输出，这时候就会附带参数 y/M/d/h/m/s/E 年/月/日/时/分/秒/星期 <br /> <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 /> </div> </div> <hr> <h3>货币格式过滤器</h3> <div> 原始输出数据的方式：<span ng-bind="price"></span> </div> <div> 通过拼接输出数据的方式：￥<span ng-bind="price"></span>.00 </div> <hr/> <div> <p> 对于要展示的货币数据【原始数据就是数字】 按照指定的货币格式进行输出 </p> 货币过滤器输出：<span ng-bind="price | currency"></span><br /> 货币过滤器输出：<span ng-bind="price | currency:'人命币￥'"></span><br /> 货币过滤器输出：<span ng-bind="price | currency:'￥':3"></span><br /> </div></div><script> var app = angular.module("myApp", []); app.controller("myCtrl", ["$scope", function($scope) { $scope.price = 499.1213; $scope.date = new Date(); $scope.name = "John Smith"; $scope.users = [ {userID:1, username:"cat", nickname:"tom"}, {userID:2, username:"xiaofan", nickname:"张小凡"}, {userID:3, username:"biyao", nickname:"碧瑶"}, {userID:4, username:"luxueqi", nickname:"陆雪琪"}, {userID:5, username:"linjingyu", nickname:"林惊羽"}, {userID:6, username:"cengshushu", nickname:"曾书书"}, {userID:7, username:"zhuque", nickname:"朱雀"}, {userID:8, username:"qinglong", nickname:"青龙"}, {userID:9, username:"guiwang", nickname:"鬼王"}, {userID:10, username:"dushen", nickname:"赌神"}, {userID:11, username:"jinpiner", nickname:"金瓶儿"} ] }]);</script></body></html>过滤器的应用代码：
<!DOCTYPE html><html ng-app="myApp"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="js/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css"> <script src="js/lib/AngularJS/angular.min.js"></script></head><body><div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="page-header"><h2>商品列表</h2></div> </div> </div> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="form-group"> <label>排序</label> 排序关键词： <select ng-model="keyword"> <option value="price">价格</option> <option value="name">名称</option> <option value="sales">销量</option> <option value="hot">人气</option> <option value="commLevel">评价</option> </select> 排序顺序：<input type="checkbox" ng-model="sort"> </div> <div class="form-group"> <label>筛选</label> <input type="text" class="from-control" ng-model="kw"> </div> </div> </div> <div class="row" ng-controller="myCtrl"> <div class="col-md-8 col-md-offset-2"> <table class="table table-striped table-hover"> <tr> <th>#</th> <th>名称</th> <th>价格</th> <th>销量</th> <th>评价</th> <th>人气</th> </tr> <tr ng-repeat="g in goodses | orderBy:keyword:sort | filter:kw"> <th><span ng-bind="$index+1"></span></th> <th><span ng-bind="g.name"></span></th> <th><span ng-bind="g.price"></span></th> <th><span ng-bind="g.sales"></span></th> <th><span ng-bind="g.commLevel"></span></th> <th><span ng-bind="g.hot"></span></th> </tr> </table> </div> </div></div><script> var app = angular.module("myApp", []); app.controller("myCtrl", function ($scope) { /* id编号 name名称 price价格 sales销量 commLevel评价等级 hot热度/人气 */ $scope.goodses = [ {id: 1, name: "商品A", price: 123, sales: 10230, commLevel: 5, hot: 10}, {id: 2, name: "商品B", price: 134, sales: 1040, commLevel: 5, hot: 110}, {id: 3, name: "商品C", price: 113, sales: 10230, commLevel: 5, hot: 102}, {id: 4, name: "商品D", price: 1433, sales: 100, commLevel: 5, hot: 103}, {id: 5, name: "商品E", price: 153, sales: 1020, commLevel: 5, hot: 104}, {id: 6, name: "商品F", price: 153, sales: 13400, commLevel: 5, hot: 130}, {id: 7, name: "商品G", price: 173, sales: 10450, commLevel: 5, hot: 102}, {id: 8, name: "商品H", price: 183, sales: 10012, commLevel: 5, hot: 104}, {id: 9, name: "商品I", price: 193, sales: 10540, commLevel: 5, hot: 106}, {id: 10, name: "商品J", price: 123, sales: 13400, commLevel: 5, hot: 1110}, {id: 11, name: "商品K", price: 13, sales: 1050, commLevel: 5, hot: 102}, {id: 12, name: "商品L", price: 133, sales: 107670, commLevel: 5, hot: 1330}, {id: 13, name: "商品M", price: 143, sales: 1080, commLevel: 5, hot: 1012}, {id: 14, name: "商品N", price: 153, sales: 15600, commLevel: 5, hot: 1320}, {id: 15, name: "商品O", price: 13, sales: 12300, commLevel: 5, hot: 1023}, {id: 16, name: "商品P", price: 13, sales: 10450, commLevel: 5, hot: 1120}, {id: 17, name: "商品Q", price: 173, sales: 1020, commLevel: 5, hot: 1120}, {id: 18, name: "商品R", price: 13, sales: 1005, commLevel: 5, hot: 1013}, {id: 19, name: "商品S", price: 1233, sales: 121300, commLevel: 5, hot: 11310}, {id: 20, name: "商品T", price: 123, sales: 10120, commLevel: 5, hot: 112120}, ] });</script></body></html> 0 0
- AngularJS的组件化、过滤器、自定义过滤器之旅
- AngularJs中组件、过滤器、自定义过滤器的使用
- AngularJs中组件、过滤器、自定义过滤器的使用
- angularJS过滤器和自定义的过滤器
- AngularJS 过滤器\自定义过滤器 $filter
- AngularJS过滤器以及自定义过滤器
- angularJS自定义过滤器使用
- angularJS---自定义过滤器
- angularjs自定义过滤器demo
- angularjs自定义过滤器
- Angularjs自定义过滤器
- angularJS 自定义过滤器
- 《AngularJs》$filter 自定义过滤器
- angularjs自定义过滤器
- AngularJs[自定义过滤器]
- AngularJs自定义过滤器
- angularJS filter自定义过滤器
- 【AngularJS】自定义过滤器
- Mac安装3系统: MacOS+Ubuntu+Windows
- redis部署
- android组件ListView之BaseAdapter简单使用
- html5调控颜色
- 【代码重构 & JDT】修改Eclipse重构撤回的深度限制
- AngularJS的组件化、过滤器、自定义过滤器之旅
- shell 脚步分析数据
- RemoteViews的解析
- servlet在web应用中的过程
- 关于javascript对象的认识详解
- dblink创建以及出现问题
- B
- Ubuntu16.10安装Lua5.3.4
- 安卓逆向工程与代码安全
