angularjs常见面试题.docx

AngularJS 常见面试问题angularjs?面试题?huangtengfei?6月30日发布推荐?1?推荐收藏?28?收藏，660?浏览问题来源：如何衡量一个人的 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 绑定给另一个显示区域，内层改变时，外层不会同步改变，因为此时已经是两个变量了。p{{name}}/pdiv ng-if=true input type=text ng-model=name/divng-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 中。举个栗子：p{{parseInt(55.66)}}p会发现，什么也没有显示。但如果在 $scope 中添加了这个函数：$scope.parseInt = function(x){ return parseInt(x);}这样自然是没什么问题了。对于这种需求，使用一个 filter 或许是不错的选择：p{{13.14 | parseIntFilter}}/papp.filter(parseIntFilter, function(){ return function(item){ return parseInt(item); }}){{now | yyyy-MM-dd}}?这种表达式里面，竖线和后面的参数通过什么方式可以自定义？filter，格式化数据，接收一个输入，按某规则处理，返回处理结果。内置 filterng 内置的 filter 有九种：date（日期）currency（货币）limitTo（限制数组或字符串长度）orderBy（排序）lowercase（小写）uppercase（大写）number（格式化数字，加上千位分隔符，并接收参数限定小数点位数）filter（处理一个数组，过滤出含有某个子串的元素）json（格式化 json 对象）filter 有两种使用方法，一种是直接在页面里：p{{now | date : yyyy-MM-dd}}/p另一种是在 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，返回一个实例化对