AngularJS 常见面试问题

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

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

ng-click 中写的表达式,能使用 JS 原生对象上的方法吗?

不止是 ng-click 中的表达式,只要是在页面中,都不能直接调用原生的 JS 方法,因为这些并不存在于与页面对应的 Controller 的 $scope 中。

  

{{parseInt(55.66)}}

会发现,什么也没有显示。
对于这种需求,使用一个 filter 或许是不错的选择:

{{13.14 | parseIntFilter}}

app.filter('parseIntFilter', function(){ return function(item){ return parseInt(item); } })

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

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

ng 内置的 filter 有九种:

  • date(日期)
  • currency(货币)
  • limitTo(限制数组或字符串长度)
  • orderBy(排序)
  • lowercase(小写)
  • uppercase(大写)
  • number(格式化数字,加上千位分隔符,并接收参数限定小数点位数)
  • filter(处理一个数组,过滤出含有某个子串的元素)
  • json(格式化 json 对象)

filter 有两种使用方法,一种是直接在页面里:

{{now | date : 'yyyy-MM-dd'}}

另一种是在 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 是什么关系?
factory

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

app.factory('FooService', function(){
return {
    target: 'factory',
    sayHello: function(){
        return 'hello ' + this.target;
    }
}
});

service

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

app.service('FooService', function(){
  var self = this;
  this.target = 'service';
  this.sayHello = function(){
    return 'hello ' + self.target;
}
});

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');
});

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

脏检查机制。

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

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

举个栗子


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

  • 按下按钮
  • 浏览器接收到一个事件,进入到 angular context
  • $digest 循环开始执行,查询每个 $watch 是否变化
    由于监视 $scope.val 的 $watch 报告了变化,因此强制再执行一次$digest 循环
  • 新的 $digest 循环未检测到变化
  • 浏览器拿回控制器,更新 $scope.val 新值对应的 dom
    $digest 循环的上限是 10 次(超过 10次后抛出一个异常,防止无限循环)。

你可能感兴趣的:(AngularJS 常见面试问题)