AngularJS 面试题集锦

前端之家收集整理的这篇文章主要介绍了AngularJS 面试题集锦前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

ng-if 跟 ng-show/hide 的区别有哪些?

第一点区别是, ng-if 在后面表达式为 true 的时候才创建这个 dom 节点, ng-show 是初始时就创建了,用 display:block 和 display:none 来控制显示不显示

第二点区别是, ng-if 会(隐式地)产生新作用域, ng-switch 、 ng-include 等会动态创建一块界面的也是如此。

这样会导致,在 ng-if 中用基本变量绑定 ng-model ,并在外层 div 中把此 model 绑定给另一个显示区域,内层改变时,外层不会同步改变,因为此时已经是两个变量了。

{{name}}

ng-show 不存在此问题,因为它不自带一级作用域。

避免这类问题出现的办法是,始终将页面中的元素绑定到对象的属性(data.x)而不是直接绑定到基本变量(x)上。

详见 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)}}

会发现,什么也没有显示

但如果在 $scope 中添加了这个函数

这样自然是没什么问题了。

对于这种需求,使用一个 filter 或许是不错的选择:

{{13.14 | parseIntFilter}}

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

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

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

内置 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

名称',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 的方法和数据放在一个对象里,并返回这个对象

service

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

provider

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

// 此处注入的是 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。

详见 AngularJS 之 Factory vs Service vs Provider

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

脏检查机制。

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

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

举个栗子

猜你在找的JavaScript相关文章