• 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.你要验证的类型

  • 相关阅读:
    我孤独吗?我软弱吗?
    DataGrid 中的 HyperLinkColumn 如何传递多个参数?(未整理)
    C# 获取 MAC地址!
    (文本)文件操作
    ioninfinitescroll实现上拉分页加载更多
    前端面试题:防抖的实现
    vue 传送门功能,实现模态窗口
    前端面试题:节流的实现( 减少一段时间的触发频率)
    vue中的render函数
    ionic5实现tab栏切换效果
  • 原文地址:https://www.cnblogs.com/ade-Java/p/6523863.html
Copyright © 2020-2023  润新知