组件化<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>
内置过滤器
1. 货币过滤器
代码如下:
<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>
2.字符串大小转换过滤器
代码如下:
<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>
2. 长度限制过滤器
<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>
3. 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>
4. 日期时间过滤器
代码如下:
<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>
</div>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",["$scope",function($scope){
$scope.date = new Date();
}])
</script>