AngularJS 高频面试题及详细答案（实战版）

AngularJS高频面试题及详细答案（实战版）一、基础概念类1、简单说说你对AngularJS的理解，它的核心特点是什么？AngularJS是一款基于MVC模式的前端双向数据绑定框架，主要用于快速开发单页应用（SPA），主打简化前端DOM操作、规范代码结构。核心特点有这几点：双向数据绑定：视图数据变更会同步更新模型，模型数据修改也会自动渲染到视图，无需手动操作DOMMVC/MVVM架构：分离视图、控制器、数据模型，代码解耦，便于维护和复用依赖注入：框架自动管理依赖，无需手动实例化对象，简化组件调用和单元测试指令系统：扩展HTML语法，自定义标签和属性，实现复杂的页面逻辑和组件封装模块化开发：支持项目拆分模块，避免全局变量污染，适合中大型项目开发服务单例：内置各类全局服务，整个应用生命周期只实例化一次，全局共享数据和方法2、AngularJS单向绑定和双向绑定的区别？各自适用场景？单向绑定（{{}}、ng-bind）：数据流向是模型→视图，只能将模型数据渲染到页面，页面修改不会反向更新模型。双向绑定（ng-model）：数据双向流通，模型更新视图、视图输入修改同步更新模型，主要用于表单交互。适用场景：单向绑定：展示类数据，比如列表、详情页、静态文本，性能更高双向绑定：表单输入、下拉选择、复选框等需要用户交互修改数据的场景3、什么是AngularJS脏检查机制？原理是什么？脏检查是AngularJS实现数据双向绑定的核心机制。框架不会监听数据变化，而是在特定触发时机，对比当前视图数据和上一次缓存的数据，如果两者不一致，就更新视图，这个比对过程就是脏检查。触发脏检查的常见场景：DOM事件触发（点击、输入、回车等）AJAX请求回调、定时器（setTimeout/setInterval）路由切换、页面渲染初始化手动调用$apply()、$digest()执行流程：触发事件->进入digest循环->遍历所有监听变量比对新旧值->数据更新则刷新视图->循环直至数据稳定（最多执行10次，防止死循环）。4、$digest和$apply的区别？日常开发怎么用？$digest：底层方法，只执行当前作用域及子作用域的脏检查，不会遍历根作用域。一般不手动调用，性能相对更好，但无法更新全局数据。$apply：上层封装方法，会执行传入的函数，然后调用根作用域的$digest，全局触发脏检查，所有作用域数据都会更新。开发场景：原生JS定时器、第三方插件回调、非Angular事件中修改模型数据，框架无法感知，页面不会自动更新，此时需要手动调用$scope.$apply()触发更新。注意：禁止频繁嵌套调用，容易造成性能卡顿、报错。二、指令相关高频题1、AngularJS常用内置指令有哪些？分别作用？ng-model：双向数据绑定，用于表单元素ng-bind：单向数据渲染，替代插值表达式，避免页面闪烁问题ng-repeat：循环渲染列表，支持数组、对象遍历ng-if/ng-show/ng-hide：元素显示隐藏控制ng-click/ng-change：点击事件、数据变更事件ng-src/ng-href：动态绑定图片地址、链接地址，避免报错ng-class/ng-style：动态绑定样式类、行内样式2、ng-if和ng-show的区别？项目中如何选择？核心区别：DOM渲染机制不同ng-if：条件为false时，直接移除DOM元素，销毁对应的作用域；条件为true时重新创建DOM、生成作用域。切换开销大，初始渲染开销小。ng-show：条件为false时，只是通过CSS隐藏元素（display:none），DOM节点保留，作用域不销毁。切换开销小，初始渲染无差异。选型原则：频繁切换显示隐藏→用ng-show初始化大概率隐藏、极少切换→用ng-if，减少DOM节点，优化页面性能3、自定义指令的四种优先级（restrict）分别是什么？restrict用于定义指令的调用方式，四个参数可组合使用：E：元素方式，自定义标签<my-dir></my-dir>A：属性方式，默认值，<divmy-dir></div>C：类名方式，<divclass="my-dir"></div>M：注释方式，<!--directive:my-dir-->开发常用组合：restrict:'EA'，支持标签和属性两种调用方式，通用性最强。4、自定义指令中link和compile的区别？compile：编译阶段，只执行一次，作用是解析DOM结构、修改模板，无作用域，不能操作数据。适合处理模板静态结构。link：链接阶段，每个指令实例都会执行，可获取当前作用域、操作DOM、绑定事件、处理动态数据逻辑。日常开发绝大部分逻辑都写在link中。执行顺序：compile先执行，返回的函数就是link函数。三、作用域与组件通信1、AngularJS$scope、$rootScope的区别？$rootScope：根作用域，全局唯一，所有控制器、子作用域都继承自它，全局数据可以挂载在这里，但滥用会造成全局变量污染。$scope：子作用域，每个控制器、指令都会生成独立$scope，作用域隔离，数据互不干扰，是页面局部数据的载体。2、AngularJS作用域的继承机制？什么时候会产生独立作用域？默认子作用域会原型继承父作用域，可以读取父作用域数据，直接修改基本数据不会影响父级，但修改引用类型数据（对象、数组）会同步父级。产生独立隔离作用域的场景：自定义指令设置scope:{}隔离作用域ng-if、ng-repeat会自动生成独立子作用域3、指令隔离作用域的三种绑定方式（@、=、&）@单向字符串绑定：接收父级传递的静态字符串，只能读取，不能修改父级数据，数据单向传递。=双向数据绑定：父子作用域数据互通，子组件修改数据会同步到父组件，适合传递变量、数组、对象。&事件方法绑定：用于子组件调用父组件的方法，实现子向父传值、事件分发。四、服务与网络请求1、service、factory、provider的区别和使用场景？三者都是用于封装公共逻辑、全局数据、接口请求，全局单例，区别在于创建方式和配置能力。factory：最常用，返回一个对象，开发者自定义属性和方法，语法简洁。适合封装通用工具方法、接口请求。日常开发首选。service：基于构造函数创建，通过this挂载属性和方法，内部自动new实例。适合面向对象的业务逻辑封装。provider：功能最强大，支持config阶段配置，可在项目启动前修改配置参数。适合需要全局配置的场景，比如封装请求拦截器、全局接口地址。2、$http和$resource的区别？$http：原生请求方法，基于XMLHttpRequest，支持所有请求方式，灵活度高，需要手动写请求地址、参数、回调。适合复杂、不规则接口请求。$resource：对$http的二次封装，专门适配RESTful接口，默认封装了get、post、put、delete方法，无需重复写请求逻辑。适合规范的前后端REST接口。3、如何实现AngularJS请求拦截器？作用是什么？通过$httpPerceptors注册拦截器，统一处理所有请求和响应。主要作用：请求拦截：统一添加token、请求头、加载loading、参数加密响应拦截：统一处理报错、状态码、关闭loading、解析返回数据、超时重连优势：全局统一管控网络请求，避免每个页面重复写请求逻辑，代码更规范。五、路由与SPA单页应用1、AngularJS路由有几种模式？区别？两种路由模式：hash模式、html5模式hash模式（默认）：地址带#号，无需后端配置，兼容性好，刷新页面不会404，适合绝大多数项目。html5模式：地址无#，页面地址更美观，需要后端配置路由重定向，否则刷新页面会404。2、ui-router和原生ng-route的区别？项目为什么多用ui-router？ng-route：官方原生路由，功能简单，只支持单层路由，无法嵌套视图、多视图，参数传递单一，功能薄弱。ui-router：第三方增强路由，支持嵌套路由、多视图路由、路由传参、路由钩子、状态管理，适配复杂中大型项目页面层级结构。实际项目基本都用ui-router，因为业务页面大多存在嵌套页面、子页面，原生路由无法满足需求。3、ui-router路由钩子有哪些？常用场景？常用全局钩子：$stateChangeStart：路由跳转前触发，常用于登录拦截、权限判断、页面权限控制$stateChangeSuccess：路由跳转成功后触发，常用于修改页面标题、关闭loading、记录页面轨迹$stateChangeError：路由跳转失败触发，用于捕获路由加载报错、模板加载失败六、性能优化与踩坑问题1、AngularJS页面卡顿、性能差的常见原因和优化方案？核心问题：脏检查循环次数过多、监听变量过多、DOM节点过多。常用优化手段：列表渲染使用trackby，减少ng-repeat节点重建，大幅提升列表渲染性能静态展示数据用单向绑定、ng-bind，减少双向绑定监听数量频繁切换元素用ng-show，静态隐藏元素用ng-if减少页面不必要的$watch监听，手动销毁无用监听避免在循环、link函数中写大量耗时逻辑分页加载列表，避免一次性渲染大量DOM节点慎用$apply全局刷新，优先使用局部更新2、ng-repeat为什么要加trackby？不加会有什么问题？AngularJS渲染列表时，默认通过数组下标跟踪节点，数组数据更新、排序、筛选时，会销毁全部DOM重新渲染，性能极差，还会导致表单输入值错乱、焦点丢失。使用trackby唯一id/索引后，框架会根据唯一标识复用原有DOM节点，只更新变化的数据，极大提升列表性能，避免页面抖动、数据错乱问题。3、AngularJS常见坑点有哪些？作用域原型继承问题：子作用域直接修改基本类型数据，无法同步父级，需用对象、数组引用类型传值原生异步事件（定时器、第三方插件）修改数据，页面不更新，需要手动$applyng-repeat、ng-if生成独立子作用域，内部修改数据不生效频繁调用$apply导致页面卡死、digest报错路由刷新404、嵌套路由视图不渲染、路由参数丢失七、进阶面试题1、如何理解AngularJS的依赖注入？优势是什么？依赖注入是框架的核心设计思想，开发者无需手动创建依赖实例，只需在控制器、服务、指令中声明依赖名称，框架会自动查找并注入实例。优势：代码解耦，无需关注依赖的创建过程便于单元测试，可灵活替换依赖模块统一管理全局服务实例，避免重复创建2、AngularJS1.x和Vue的核心区别？（高频对比题）更新机制：AngularJS靠脏检查；Vue靠数据劫持+发布订阅，精准更新，性能更好架构：AngularJS重框架、强约