angular 1.6指令与服务

angular.js
1、自定义指令:directive //可以读取到并且会影响到外部的js逻辑和样式
app.directive('name',function(){
return {
restrict:"A"
// A作为 属性使用;<div name></div>
// E作为 元素名使用 <name></name>
// C作为 类名使用 <div class="name"></div>
// M作为 注释使用 <!-- directive: name -->
replace:true //作为注释使用的时候必须加replace:true
template:"<p>范例</p>"
templateUrl:'./test.html'
}
});
2、过滤器:filter
1>调用:
<div>{{text | clear:'参数'}}</div>
2> 系统自带:
currency:格式化数字为货币格式;
filter:从数组项中选择一个子集
lowercase:格式化字符串为小写
uppercase:格式化字符串为大写
orderBy:根据某个表达式排列数组
3>自定义过滤器:
app.filter('name',function(){
  return function(input){
  //input:接到的值;
  //code。。。
  return input;
}
})
3、服务 service
注:过滤器属于服务的一种;
1.$location
1>$location 获取值:
.absUrl()返回当前的URL地址;
.path()获取当前url的子路径(也就是当前url#后面的内容,不包括参数)
.protocol()获取当前url的协议(比如http,https)
.host()获取当前URL的主机名
.port()获取端口
.search()获取参数的序列化json对象
2>修改url的相关方法:
.url('/test')修改url的子路径(也就是当前url#后面的内容,不包括参数)
.path('/test/test1')修改url的子路径部分(也就是当前url#后面的内容,不包括参数)

2.$http 服务向服务器发送请求,应用响应服务器传送过来的数据。
1> $http.get("./data.json").then(function (result){
  console.info(result);
  $scope.item = result.data.data;
}).catch(function (result){
  console.info(result);
  console.log(result.status);
});
3.$timeout AngularJS $timeout 服务对应了 JS window.setTimeout 函数。
$timeout(function (){},1000);

4.$interval AngularJS $timeout 服务对应了 JS window.setInterval 函数。
$interval(function (){},1000);

5.自定义服务
app.service('name',function(){
  this.add = function(x){
  return x++;
}
})
使用时在控制器中注入自定义服务的名字:
controller('controllerName',['$scope','name',function($scope,name){
$scope.a = name.add(1);
}])

4、输入验证:
1.required h5属性 非空;
2.ng-minlength 最小长度 max 最大长度
3.ng-pattern="//"匹配正则表达式
4.根据input type判断
formName.inputType.$error.type //form的name值.input的type值.$error.你要验证的类型

posted @ 2017-03-09 07:12  三木一森  阅读(899)  评论(0编辑  收藏  举报