angularJS 组件及内置过滤器

组件化<component>

组件化是将页面中一部分UI封装起来进行重复使用，UI中的数据可以是不同的，甚至组件中可以对UI进行适当的业务逻辑处理，如链接跳转、数据运算等等

组件语法结构如下:

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

app.component("name",{

settings

});

组件选项

　template:组件替换模板字符串。

templateUrl:组件替换html模板页面．

controller:组件控制器;

组件定义语法结构：

var app =angular.module(“myApp”, []);

app.component(“myComp”,{

template:”<h1>组件化开发</h1>”,

controller:function($scope) {

控制器处理代码

}

});

组件命名规则：

组件的命名有框架自己的规则和使用规范，都是根据实际项目需要进行封装处理的

组件命名规则：驼峰命名法，见名知意，如：myComp

使用规则：W3C命名规则，将大写字母转换成小写字母，前面加中划线，如<my-ctrl></my-comp>

内置过滤器

１. 货币过滤器

代码如下：

　　<h3>货币格式过滤器</h3>

<div>原始输出数据的方式：<spanng-bind="price"></span>

</div>

<div> 通过拼接输出数据的方式：￥<spanng-bind="price"></span>.00</div>

　　　<script>

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

app.controller("myCtrl",["$scope",function($scope){

$scope.price=499.1213;

}])

</script>

２．字符串大小转换过滤器

代码如下：

　<div>

<h3>字符串大小写转换过滤器</h3>

<divng-bind="name"></div>

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

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

</div>

<script>

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

app.controller("myCtrl",["$scope",function($scope){

$scope.name ="John Smith";

}])

</script>

２. 长度限制过滤器

<div>

<h3>长度限制过滤器</h3>

长度：<inputtype="text" ng-model="length"><br />

位置：<inputtype="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>

　<script>

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

app.controller("myCtrl",["$scope",function($scope){

$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>

３. JSON过滤器

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

代码如下：

　　<div>

　　　　<h3>JSON过滤器</h3>

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

</div>

<script>

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

app.controller("myCtrl",["$scope",function($scope){

$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>

４. 日期时间过滤器

代码如下：

<div>

<h3>日期时间过滤器</h3>

<div>

原始输出：<spanng-bind="date"></span>

</div>

<div>

日期格式化：<spanng-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>

　<script>

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

app.controller("myCtrl",["$scope",function($scope){

$scope.date = new Date();

}])

</script>

angularJS 组件及内置过滤器相关推荐

angularjs读书笔记：angularjs内置过滤器总结——摘自《Angularjs权威教程》
过滤器用来格式化需要展示给用户的数据.AngularJS有很多实用的内置过滤器,同时也提供了方便的途径可以自己创建过滤器. 在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器.例如,假设我 ...
Spring Security的内置过滤器是如何维护的？
Spring Security中的内置过滤器顺序是怎么维护的?我想很多开发者都对这个问题感兴趣.本篇我和大家一起探讨下这个问题. HttpSecurity包含了一个成员变量FilterOrderReg ...
apache shiro内置过滤器标签注解
内置过滤器 anon(匿名) org.apache.shiro.web.filter.authc.AnonymousFilter authc(身份验证) org.apache.shiro ...
Django中的内置过滤器
Django的内置过滤器
Shiro的内置过滤器没有生效
Shiro的内置过滤器没有生效在学习shiro时,对某些访问路径设置过滤器,如filterMap.put("/user/add","authc");但是设置好 ...
gateway内置过滤器工厂
Spring Cloud Gateway 内置的过滤器工厂内置的过滤器工厂这里简单将Spring Cloud Gateway内置的所有过滤器工厂整理成了一张表格.如下: 过滤器工厂作用参数 A ...
Hbase 内置过滤器
HBase为筛选数据提供了一组过滤器,通过这个过滤器可以在HBase中的数据的多个维度(行,列,数据版本)上进行对数据的筛选操作,也就是说过滤器最终能够筛选的数据能够细化到具体的一个存储单元格上(由行 ...
angularjs修改html标签,angularjs sanitize+ng-bind-html内置指令做html标签转义
之前对angularjs学习得还是不够深入,以至于自己忽略了angular-sanitize这个模块.还自己写了大量的正则表达式.但是后面发现,无论写再多的正则,也不能覆盖一些文本自带的html标签. ...
HBase内置过滤器的一些总结
HBase为筛选数据提供了一组过滤器,通过这个过滤器可以在HBase中的数据的多个维度(行,列,数据版本)上进行对数据的筛选操作,也就是说过滤器最终能够筛选的数据能够细化到具体的一个存储单元格上(由行 ...

angularJS 组件及内置过滤器

angularJS 组件及内置过滤器相关推荐

最新文章

热门文章