AngularJS常见面试题及解答

AngularJS常见面试题详解 AngularJS是一个基于JavaScript的开源前端框架，广泛应用于互联网行业。以下是AngularJS常见面试题的详细解释： **问题1：如何衡量一个人的AngularJS水平？** 衡量一个人的AngularJS水平可以从以下几个方面入手： * 对AngularJS的基本概念和架构的理解，例如模块、控制器、服务、指令、过滤器等。 * 对AngularJS的生命周期和作用域的理解，例如$scope、$rootScope、$digest循环等。 * 对AngularJS的指令和组件的理解，例如ng-if、ng-show、ng-hide、ng-repeat等。 * 对AngularJS的服务和工厂的理解，例如$http、$timeout、$interval等。 * 对AngularJS的表单验证和错误处理的理解，例如ng-form、ng-model、$error等。 **问题2：ng-if和ng-show/hide的区别** ng-if和ng-show/hide都是AngularJS中用于控制元素显示和隐藏的指令，但是它们之间有一些关键的区别： * ng-if会在后面表达式为true的时候才创建这个DOM节点，而ng-show是初始时就创建了，用display:block和display:none来控制显示和不显示。 * ng-if会（隐式地）产生新作用域，而ng-show不存在此问题。 * ng-if中的变量绑定到外层div中时，会导致内层改变时，外层不会同步改变，因为此时已经是两个变量了。避免这类问题出现的办法是，始终将页面中的元素绑定到对象的属性（data.x）而不是直接绑定到基本变量（x）上。 **问题3：ng-repeat迭代数组的时候，如果数组中有相同值，会有什么问题，如何解决？** ng-repeat迭代数组的时候，如果数组中有相同值，会提示Duplicates in a repeater are not allowed。解决方法是，加trackby$index可解决。当然，也可以traceby任何一个普通的值，只要能唯一性标识数组中的每一项即可（建立dom和数据之间的关联）。 **问题4：ng-click中写的表达式，能使用JS原生对象上的方法吗？** ng-click中写的表达式不能直接调用原生的JS方法，因为这些方法并不存在于与页面对应的Controller的$scope中。例如：<p>{{parseInt(55.66)}}<p>这个表达式不会显示任何结果，因为parseInt方法并不在$scope中。如果在$scope中添加了这个函数，例如：$scope.parseInt=function(x){return parseInt(x);}那么自然是没什么问题了。 **问题5：使用filter解决问题** 在AngularJS中，可以使用filter来解决问题。例如，可以使用filter来格式化日期、数值、字符串等。filter可以在模板中使用，例如：<p>{{date | date:'yyyy-MM-dd HH:mm:ss'}}</p>。也可以在Controller中使用，例如：$scope.formatDate=function(date){return date | date:'yyyy-MM-dd HH:mm:ss';}。