angularJS 组件及内置过滤器

来源：互联网发布：淘宝批发网叫什么编辑：程序博客网时间：2024/05/29 08:35

组件化<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>

1 0