zoukankan      html  css  js  c++  java
  • Angular面试题二

    十一、ng-repeat迭代数组的时候,如果数组中有相同值,会有什么问题,如何解决?

     会提示 Duplicates in a repeater are not allowed. 加 track by $index 可解决。当然,也可以 trace by 任何一个普通的值,只要能唯一性标识数组中的每一项即可(建立 dom 和数据之间的关联)。

    十二、{{now | 'yyyy-MM-dd'}} 这种表达式里面,竖线和后面的参数通过什么方式可以自定义?

    filter,格式化数据,接收一个输入,按某规则处理,返回处理结果。

    内置 filter

    1、ng 内置的 filter 有九种:

    1.date(日期)

    2.currency(货币)

    3.limitTo(限制数组或字符串长度)

    4.orderBy(排序)

    5.lowercase(小写)

    6.uppercase(大写)

    7.number(格式化数字,加上千位分隔符,并接收参数限定小数点位数)

    8.filter(处理一个数组,过滤出含有某个子串的元素)

    9.json(格式化 json 对象)

      2、filter 有两种使用方法,

    1)是直接在页面里:

    <p>{{now | date : 'yyyy-MM-dd'}}</p>

     2)是在 js 里面用:

    // $filter('过滤器名称')(需要过滤的对象, 参数1, 参数2,...)

    $filter('date')(now, 'yyyy-MM-dd hh:mm:ss');

    ***自定义 filter

    // 形式

    app.filter('过滤器名称',function(){

      return function(需要过滤的对象,过滤器参数1,过滤器参数2,...){

        //...做一些事情

        return 处理后的对象;

      }

    });

     

    // 列子

    app.filter('timesFilter', function(){

      return function(item, times){

        var result = '';

        for(var i = 0; i < times; i++){

          result += item;

        }

        return result;

      }

    })

     

    十三、factory、service 和 provider 是什么关系?

       1.factory

    service 的方法和数据放在一个对象里,并返回这个对象

    app.factory('FooService', function(){

      return {

        target: 'factory',

        sayHello: function(){

          return 'hello ' + this.target;

        }

      }

    });

     2.service

    通过构造函数方式创建 service,返回一个实例化对象

    app.service('FooService', function(){

      var self = this;

      this.target = 'service';

      this.sayHello = function(){

        return 'hello ' + self.target;

      }

    });

     3.provider

    创建一个可通过 config 配置的 service$get 中返回的,就是用 factory 创建 service 的内容

    app.provider('FooService', function(){

      this.configData = 'init data';

      this.setConfigData = function(data){

        if(data){

          this.configData = data;

        }

      }

      this.$get = function(){

        var self = this;

        return {

          target: 'provider',

          sayHello: function(){

            return self.configData + ' hello ' + this.target;

          }

        }

      }

    });

    // 此处注入的是 FooService provider

    app.config(function(FooServiceProvider){

      FooServiceProvider.setConfigData('config data');

    });

    从底层实现上来看,service 调用了 factory,返回其实例;factory 调用了 provider,返回其 $get 中定义的内容。factory 和 service 功能类似,只不过 factory 是普通 function,可以返回任何东西(return 的都可以被访问,所以那些私有变量怎么写,你懂的);service 是构造器,可以不返回(绑定到 this 的都可以被访问);provider 是加强版 factory,返回一个可配置的 factory。

    十四、angular 的数据绑定采用什么机制?详述原理

    1.脏检查机制。

    2.双向数据绑定是 AngularJS 的核心机制之一。当 view 中有任何数据变化时,会更新到 model ,当 model 中数据有变化时,view 也会同步更新,显然,这需要一个监控。

    原理就是,Angular 在 scope 模型上设置了一个 监听队列,用来监听数据变化并更新 view 。每次绑定一个东西到 view 上时 AngularJS 就会往 $watch 队列里插入一条 $watch ,用来检测它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时, $digest 循环就会触发,遍历所有的 $watch ,最后更新 dom。

    举个栗子

    <button ng-click="val=val+1">increase 1</button>

    click 时会产生一次更新的操作(至少触发两次 $digest 循环)

    按下按钮

    浏览器接收到一个事件,进入到 angular context

    $digest 循环开始执行,查询每个 $watch 是否变化

    由于监视 $scope .val 的 $watch 报告了变化,因此强制再执行一次 $digest 循环

    新的 $digest 循环未检测到变化

    浏览器拿回控制器,更新 $scope .val 新值对应的 dom

    $digest 循环的上限是 10 次(超过 10次后抛出一个异常,防止无限循环)。

    十五、两个平级界面块a和b,如果a中触发一个事件,有哪些方式能让b知道?详述原理

    这个问题换一种说法就是,如何在平级界面模块间进行通信。有两种方法,一种是共用服务,一种是基于事件。

    (1)共用服务

    在 Angular 中,通过 factory 可以生成一个单例对象,在需要通信的模块 a 和 b 中注入这个对象即可。

    (2)基于事件

    这个又分两种方式

    第一种是借助父 controller。在子 controller 中向父 controller 触发( $emit )一个事件,然后在父 controller 中监听( $on )事件,再广播( $broadcast )给子 controller ,这样通过事件携带的参数,实现了数据经过父 controller,在同级 controller 之间传播。

    第二种是借助 $rootScope 。每个 Angular 应用默认有一个根作用域 $rootScope , 根作用域位于最顶层,从它往下挂着各级作用域。所以,如果子控制器直接使用 $rootScope 广播和接收事件,那么就可实现同级之间的通信。

  • 相关阅读:
    推荐系统中的注意力机制——阿里深度兴趣网络(DIN)
    负样本采样及bias校准、ctr平滑
    todo提纲
    漫谈深度学习时代点击率预估技术进展 &&深度学习在推荐系统上的发展
    对数据分析的一点思考
    计算广告中常用深度学习网络
    pandas常见函数详细使用
    ann搜索算法(Approximate Nearest Neighbor)
    LintCode翻转字符串问题
    python常用库
  • 原文地址:https://www.cnblogs.com/ndos/p/8331676.html
Copyright © 2011-2022 走看看