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

AngularJS高频面试题及详细答案（实战版）一、基础概念类1.简单说说你对AngularJS的理解，它的核心特性有哪些？AngularJS是一款基于MVC模式的前端双向数据绑定框架，主打简化单页应用（SPA）开发，适配早期前端工程化开发场景，核心是通过数据驱动视图，减少手动DOM操作。核心特性主要有这几点：双向数据绑定：模型数据更新自动同步视图，视图修改也会反向更新模型，无需手动操作DOMMVC/MVVM架构：分离数据、视图、逻辑层，代码结构清晰，便于维护依赖注入：自动管理组件依赖，无需手动实例化对象，降低代码耦合度指令系统：扩展HTML语法，自定义标签和属性，实现复用逻辑服务机制：通过单例服务存储公共数据和方法，实现页面、组件间数据共享路由功能：支持前端路由，实现无刷新页面跳转，完成SPA开发2.AngularJS双向数据绑定的原理是什么？AngularJS双向数据绑定核心依靠脏值检测（DirtyCheck）机制实现，没有使用Object.defineProperty，这是它和Vue最大的区别。具体执行流程：页面初始化时，框架会给所有绑定的数据添加监听，生成watch监视器当触发指定事件（点击、输入、路由跳转、定时器等）时，会进入$digest循环循环中会遍历所有watch，对比数据当前值和上一次缓存值如果发现数据不一致，就更新视图，同时更新缓存值，持续循环直到所有数据稳定视图手动修改数据后，也会触发digest循环，反向更新模型数据补充：默认的普通变量绑定只会执行一次检测，复杂数据（对象、数组）需要深度监听，会消耗更多性能。3.什么是$scope、$rootScope？二者的区别是什么？$scope是AngularJS的作用域对象，充当视图和控制器的桥梁，用来存储数据、绑定视图、定义页面方法，每个控制器都有自己独立的$scope。$rootScope是根作用域，是所有$scope的父级，整个应用全局唯一。核心区别：作用范围：$scope仅当前控制器和子控制器有效；$rootScope全局所有页面、控制器都能访问唯一性：页面可以有多个$scope；全局仅有一个$rootScope使用场景：$scope用于页面私有数据和逻辑；$rootScope用于全局公共数据（登录状态、全局配置）弊端：滥用$rootScope会造成全局变量污染，数据混乱，尽量少用二、核心原理类（高频难点）4.详细说说AngularJS脏值检测的执行机制，以及$digest和$apply的关系很多新手会混淆这两个方法，实际开发中核心逻辑很清晰：$digest：是框架底层的核心循环方法，负责遍历watch、对比数据、更新视图，框架内部自动调用，开发者一般不会手动执行。$apply：是对外暴露的手动触发方法，作用是手动开启脏值检测。正常场景下，AngularJS内置的事件（ng-click、ng-model、定时器）会自动触发digest循环，但如果是原生JS事件、第三方插件回调、setTimeout原生定时器修改数据，框架无法感知，视图不会更新。这时就需要手动调用$scope.$apply()，主动触发digest循环，更新视图。执行顺序：调用$apply()→进入脏值检测→执行$digest循环→数据对比、更新视图。注意：不要频繁调用$apply，容易造成多重digest报错，影响页面性能。5.AngularJS为什么会出现Digest循环报错（无限脏检）？怎么解决？报错核心原因：一次脏值检测结束前，数据被二次修改，导致循环无限执行。常见场景：watch监听回调中修改了自身监听的数据多次嵌套调用$apply、$digest父子作用域数据双向联动，互相修改对方数据解决方案：精简watch逻辑，不在监听回调中随意修改监听数据统一数据修改入口，避免嵌套触发检测使用$timeout代替原生setTimeout，内置自动触发检测，无需手动$apply6.AngularJS依赖注入是什么？有几种注入方式？依赖注入是框架的核心设计思想，简单说就是框架自动帮我们加载所需的依赖服务，无需手动创建实例，极大降低代码耦合。三种注入方式：隐式注入（直接传参）：写法最简单，控制器参数直接写服务名，缺点是打包压缩后参数名改变会失效，不适合生产环境数组注解注入：数组最后一项是回调函数，前面字符串固定写服务名，不受打包压缩影响，项目最常用$inject标注注入：通过控制器的$inject属性绑定依赖，适合模块化、统一配置的项目三、指令相关面试题7.AngularJS指令的作用，常用内置指令有哪些？指令是AngularJS用来扩展HTML功能的语法，本质是绑定在DOM上的自定义行为，可实现数据绑定、事件监听、DOM操作、组件复用。常用内置指令：ng-model：双向数据绑定，多用于表单输入框ng-bind：单向数据绑定，渲染文本，解决插值表达式闪烁问题ng-repeat：循环渲染列表，支持数组、对象遍历ng-click/ng-change：点击、值改变事件ng-show/ng-hide：通过CSS控制元素显示隐藏（保留DOM）ng-if：通过移除/添加DOM节点控制显示隐藏（销毁重建DOM）ng-class/ng-style：动态绑定样式、类名8.ng-if和ng-show的区别？项目中如何选择使用？核心差异在于DOM渲染机制和性能：ng-show/ng-hide：基于CSSdisplay属性切换，元素始终存在于DOM树中，只是视觉隐藏。切换速度快，但初始渲染、隐藏后依然占用页面资源ng-if：条件不成立时直接移除DOM节点，条件成立时重新创建DOM、编译指令、生成作用域。切换速度慢，但是隐藏时不占用资源，还会销毁内部作用域使用场景选择：频繁切换显示隐藏的元素（弹窗、按钮、模块切换）：用ng-show初始大概率隐藏、极少切换的元素（权限模块、异常提示）：用ng-if9.自定义指令的核心参数有哪些？各自作用是什么？自定义指令是AngularJS组件复用的核心，常用核心参数：restrict：定义指令调用方式，E（标签）、A（属性）、C（类名）、M（注释），项目常用EAscope：指令作用域，false（继承父作用域）、true（独立继承）、{}（隔离作用域，最常用）template/templateUrl：指令内部HTML模板，短模板用template，长模板用外链templateUrlcontroller：指令内部控制器，处理指令逻辑、数据link：核心函数，用于操作DOM、监听数据、绑定事件，参数包含scope、element、attrsreplace：是否替换原有DOM节点，true替换，false嵌套10.指令隔离作用域的三种绑定符号&=<区别？隔离作用域用于父子指令/组件传值，三种绑定方式适配不同场景：=双向绑定：父子数据互相影响，父变子变、子变父变，适合数据同步场景，慎用，容易造成数据混乱&方法绑定：用于子组件调用父组件的方法，实现子向父传值、触发父级逻辑，是组件事件通信的核心@/<单向绑定：父组件数据单向传递给子组件，父变子变，子修改不影响父组件，数据安全，项目最常用四、服务与网络请求11.AngularJS有几种服务创建方式？factory、service、provider的区别？三种核心服务创建方式，本质都是单例，区别在于写法和使用场景：factory：工厂函数，返回一个对象，自定义属性和方法，项目最常用，灵活度最高，适合封装公共接口、工具方法service：构造函数，通过this挂载属性和方法，框架自动new实例，写法简单，适合逻辑简单的公共服务provider：唯一可以在config配置阶段配置的服务，必须有$get方法，适合需要全局配置、初始化参数的服务（如接口地址统一配置）简单总结：普通公共方法用factory，简单全局变量用service，需要配置初始化用provider。12.$http和ajax的区别？$http的常用配置和坑点？$http是AngularJS封装的AJAX请求工具，基于原生XHR封装，自带Promise回调，适配框架数据流。和原生AJAX区别：原生AJAX写法繁琐，需要手动处理状态码、回调；$http语法简洁，支持链式调用$http请求完成后，自动触发脏值检测，无需手动$apply；原生AJAX修改数据后需要手动触发更新$http支持拦截器、全局配置，便于统一处理请求、响应常见坑点：post请求默认请求体是json格式，部分后端需要form格式，需要手动修改请求头跨域问题需要后端配置跨域，前端无法单独解决重复请求导致数据错乱，需要做请求防抖、取消重复请求处理13.AngularJS拦截器的作用，如何实现全局请求拦截？拦截器是全局请求统一处理的工具，核心作用是统一处理所有请求和响应，避免重复代码。常用场景：请求拦截：统一添加token、请求头、加载动画响应拦截：统一处理报错（401、403、500）、关闭加载动画、格式化返回数据实现方式：通过$httpPerceptors注册自定义拦截器，包含request、response、requestError、responseError四个回调方法。五、路由与SPA开发14.AngularJS路由原理，$route和$state的区别？AngularJS前端路由核心是通过监听地址栏hash变化，匹配对应模板和控制器，无刷新切换页面，实现单页应用。两种路由方案区别：$route（原生ng-route）：框架自带路由，功能简单，仅支持基础路由跳转、参数传递，不支持嵌套路由、路由状态，适合简单项目$state（ui-router）：第三方路由插件，企业项目主流方案，支持嵌套路由、多视图、路由状态管理、路由传参、路由守卫，功能更全面15.ui-router路由传参的两种方式，以及参数区别？ui-router常用两种传参方式：url路径传参：参数拼接在路由地址中，如/user/:id，参数会显示在地址栏，刷新页面参数不丢失，适合详情页、固定参数传递params隐式传参：通过state的params配置传参，参数不显示在地址栏，刷新页面参数丢失，适合临时数据、隐私参数传递六、性能优化与实战坑点16.AngularJS页面卡顿、性能差的原因？如何优化？AngularJS性能瓶颈核心在脏值检测，数据越多、监听越多，digest循环越慢，页面越卡顿。实战优化方案：减少watch数量：尽量用单向绑定代替双向绑定，取消不必要的DOM绑定监听优化列表渲染：长列表使用limitTo分页渲染，避免一次性渲染大量DOM，减少ng-repeat监听精简watch逻辑：不在watch、ng-repeat中写复杂逻辑、循环、接口请求避免频繁触发脏检：减少手动$apply，用$timeout替代原生定时器销毁无用监听：页面销毁时，取消watch监听、定时器、事件监听，避免内存泄漏使用单次绑定：固定不变的数据用::单次绑定，渲染完成后自动销毁watch17.AngularJS内存泄漏的常见场景和解决办法？常见泄漏场景：页面离开后，未销毁watch监听、定时器、原生DOM事件全局$rootScope绑定事件，页面销毁未移除ng-repeat循环创建大量监听，未及时释放解决方案：监听页面$destroy事件，在页面销毁时，清除所有定时器、解绑watch、移除事件监听，彻底释放内存。18.AngularJS插值表达式闪烁问题怎么解决？问题原因：页面加载时，AngularJS脚本未加载完成，浏览器会先渲染原始的{{}}插值符号，脚本加载完毕后才替换为数据，出现短暂闪烁。两种解决方案：使用ng-bind替代插值表达式，优先渲染数据，不会出现符号闪烁使用ng-cloak指令，配合内置CSS隐藏未编译的插值表达式，编译完成后自动解锁显示七、进阶面试题19.说说AngularJS中的$watch、$watchGroup、$watchCollection区别？$watch：单数据监听，默认浅层监听，仅监听基本数据；开启深度监听可监听对象，但性能消耗大$watchGroup：批量监听多个简单数据，多个数据任意一个变化都会触发回调，性能优于多个单独$watch$watchCollecti