******你还在为html里面繁杂的布局、繁琐的代码杂乱无章而烦恼吗,看完这些我想你可以放下你的忧愁,你的不满,你会体会到夕阳洒在你的脸上所带来的快乐和满足。******
组件化:
组件(Component)是对数据和方法的简单封装。
把复杂系统拆分成多个组件,分离组件边界和责任,便于独立升级和维护。
将页面中可以重复使用的标签封装成一个组件,方便这一部分UI重复使用
类似于JS中的函数,封装了一部分处理代码,通过函数调用就可以重复使用这些代码.
下面简单介绍一下组件化的写法:
<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> ------只需要写一个标签就行了
<script>
var app = angular.module("myApp", []);
app.component("myComp", { -------“myComp”就是上方标签的名字
template:"<h1>天时地利人和</h1>" -------template这里可以写成 templateUrl:后面接的
是页面链接地址。可以再链接的页面写上你需要显示的
内容,可以在里面直接修改样式。
});
</script>
</body>
</html>
这是一个比较简单的写法,还可以用外链的方式写js,这样页面就变得更清晰,更简洁。
过滤器:AngularJS 过滤器可用于转换数据;
过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中;
常用的过滤器有:
currency | 格式化数字为货币格式。 |
filter | 从数组项中选择一个子集。 |
lowercase | 格式化字符串为小写。 |
orderBy | 根据某个表达式排列数组。 |
uppercase | 格式化字符串为大写。 |
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/lib/angular.min.js"></script> </head> <body> <div ng-controller="myCtrl"> 货币过滤器 <span ng-bind="price|currency:'¥':3"></span> <div> 时间过滤器 <span ng-bind="date"></span><br> <span ng-bind="date|date"></span><br> <span ng-bind="date|date:'yyyy年mm月dd日hh时mm分ss秒'"></span><br> <span ng-bind="date|date:'hh时mm分ss秒'"></span><br> </div> <div> <p> <input type="text" ng-model="keyword"> </p> 关键词过滤器 <ul ng-repeat="g in users|filter:keyword"> <li ng-bind="g.userID"></li> <li ng-bind="g.username"></li> <li ng-bind="g.nickname"></li> </ul> </div> <div>
大写字母过滤器 <span ng-bind="name|uppercase"></span> </div> <div> <p> <input type="text" ng-model="keyword"> <input type="checkbox" ng-model="RR"> </p> 排序,关键词过滤器 <ul ng-repeat="g in users|orderBy:keyword:RR|filter:keyword"> <li ng-bind="g.userID"></li> <li ng-bind="g.username"></li> <li ng-bind="g.nickname"></li> </ul> </div> </div> </body> <script> var app=angular.module("myApp",[]); app.controller("myCtrl",["$scope",function ($scope) { $scope.price=12.2055 $scope.name="yuenfejh" $scope.date=new Date() $scope.users = [ {userID:1, username:"cat", nickname:"tom"}, {userID:2, username:"dog", nickname:"shuke"}, {userID:3, username:"mouse", nickname:"jerry"}, {userID:4, username:"bajie", nickname:"悟能"}, {userID:5, username:"houge", nickname:"悟空"},
]
}])
</script>
</html>
自定义过滤器:
app.filter(name, fn):用于定义一个自定义过滤器;
name:过滤器名称
fn:过滤器处理函数
去重:
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/lib/angular.min.js"></script> </head> <body> <div ng-controller="myCtrl"> <span ng-bind="name|mycolor"></span> </div> </body> <script> var app=angular.module("myApp",[]); app.filter("mycolor",function () { return function (value) { -----过滤器中,直接return function(value) {} -----通过闭包函数来实现数据处理,固定语法结构!------value参数:第一个参数,用于接收要处理的数据:
数据就是过滤器管道符前面变量中的数据; for(var i=0;i<=value.length-1;i++){ for(var j=i+1;j<=value.length-1;j++){ if(value[i]==value[j]){ value.splice(j,1)j-- } } } return value -----过滤器中数据处理完成,一定要返回输出 } }) app.controller("myCtrl",function ($scope) { $scope.name=[ 1,2,4,2,6,8,1,4,9,3,6 ] }) </script> </html>