在现在的常规网页中,网页结构一般分为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>