AngularJS 面试题及详细答案（实战完整版）

AngularJS面试题及详细答案（实战完整版）一、基础概念篇1、简单说说你对AngularJS的理解，它的核心特点是什么？AngularJS是一款基于MVC模式的前端JS框架，主打双向数据绑定，主要用于快速开发单页面应用（SPA），也是早期主流的前端工程化框架之一。核心特点主要有五点：双向数据绑定：视图层数据变化会自动同步到模型层，模型层数据更新也会自动渲染到视图，无需手动操作DOMMVC分层思想：将视图、业务数据、控制逻辑分离，代码结构清晰，便于维护依赖注入：框架自动管理依赖，无需手动创建对象，降低代码耦合度指令系统：封装了大量内置指令，同时支持自定义指令，扩展HTML功能服务模块化：通过module划分模块，service、factory统一管理公共业务逻辑，实现代码复用2、AngularJS中的MVC和MVVM区别是什么？AngularJS早期宣称MVC，实际开发中更贴近MVVM模式，两者核心区别如下：MVC：Model（数据）、View（视图）、Controller（控制器）。控制器作为中间层，手动控制视图和数据的交互，视图和模型不能直接通信MVVM：在MVC基础上增加ViewModel，也就是Angular的$scope。ViewModel自动监听数据和视图变化，实现双向绑定，控制器只负责处理业务逻辑，不用操作DOM，视图和数据自动同步简单来说，AngularJS核心是通过$scope实现视图和数据的自动联动，弱化了控制器的DOM操作，属于MVVM思想。3、什么是单页面应用（SPA）？AngularJS如何实现SPA？单页面应用就是整个项目只有一个HTML页面，所有页面跳转、内容切换都通过JS动态渲染，不会刷新整个浏览器页面。AngularJS依靠路由机制实现SPA：通过ngRoute或ui-router监听浏览器url变化根据不同的路由地址，动态加载对应的模板页面和控制器页面切换只替换局部视图内容，保留公共布局（头部、侧边栏等），无整页刷新，提升页面响应速度和用户体验二、核心原理篇（面试高频）1、详细说说AngularJS双向数据绑定的实现原理AngularJS双向绑定核心是脏值检测（DirtyCheck），不是Vue的数据劫持，这是最核心的区别。整体流程分为三步：绑定监听：页面加载时，框架会给所有绑定的数据、视图节点添加监听，存入监听队列触发检测：当页面发生事件（点击、输入、AJAX请求、定时器等），会触发Angular的$digest循环脏值比对更新：$digest会循环遍历所有监听数据，对比数据当前值和旧值，如果不一致，就更新视图，并再次循环检测，直到所有数据稳定无变化，结束循环补充关键点：默认普通JS事件不会触发脏值检测，需要手动调用$apply()或$digest()最多循环10次，避免死循环报错，防止页面卡死2、$digest和$apply的区别是什么？两者核心作用都是触发脏值检测，区别在于触发范围和使用场景：$digest()：只触发当前作用域及子作用域的脏值检测，范围更小，性能更好，适合局部数据更新$apply()：会触发根作用域的脏值检测，全局所有作用域都会遍历，范围大、消耗高。$apply内部本质是先执行传入的函数，再调用$digest()使用建议：尽量用$digest，少用$apply，避免全局检测造成性能浪费；原生JS定时器、AJAX回调、浏览器原生事件中修改scope数据，必须手动调用这两个方法更新视图。3、AngularJS作用域（$scope）是什么？有什么特点？$scope是视图和控制器之间的桥梁，是一个数据对象，用来存储页面所需数据、绑定视图、注册事件方法。核心特点：层级结构：存在根作用域$rootScope，所有控制器作用域都是子作用域，层层嵌套原型继承：子作用域可以继承父作用域的属性和方法，子作用域修改基础类型数据不会影响父作用域，修改引用类型会影响父级独立隔离：不同控制器的独立作用域互不干扰，避免数据污染4、什么是$rootScope？和普通$scope的区别？$rootScope是整个项目的根作用域，全局唯一，所有普通$scope都是它的后代。区别：生命周期不同：$rootScope页面打开就创建，页面关闭才销毁；普通$scope控制器加载创建，控制器销毁就销毁作用范围不同：$rootScope全局所有页面、控制器都能访问；普通$scope仅当前控制器及子控制器可用使用场景：全局公共数据、全局事件可以挂载在$rootScope，局部业务数据必须用普通$scope，防止全局变量过多导致混乱三、服务与依赖注入篇1、AngularJS中factory、service、provider的区别和使用场景？三者都是用来封装公共逻辑、实现数据和方法复用的服务，核心区别是返回值和初始化方式不同，也是面试高频重点。（1）factory是一个普通函数，必须手动return对象，返回的对象就是服务实例。支持自定义返回结构，灵活度最高。场景：绝大多数公共方法、数据封装、接口请求封装，日常开发最常用。（2）service是一个构造函数，框架会自动new实例，不需要return，直接给this挂载属性和方法即可。场景：单纯的工具类、公共方法集合，结构简单的通用服务。（3）provider是底层服务，必须有$get方法，只有它可以在config配置阶段注入配置、修改参数。场景：需要全局配置的服务，比如修改路由默认配置、修改请求拦截器默认参数、第三方插件全局配置。2、AngularJS依赖注入的原理和好处？依赖注入就是框架自动帮我们加载所需的依赖服务，不需要我们手动创建实例、管理依赖关系。原理：定义控制器、服务时声明依赖名称，框架在初始化阶段，根据名称匹配对应的服务实例，自动注入到当前逻辑中。好处：降低代码耦合度，不用硬编码依赖方便单元测试，可灵活替换依赖实例代码更简洁，统一管理依赖，便于维护四、指令系统篇1、AngularJS常用内置指令有哪些？简单说明用途ng-model：双向数据绑定，多用于输入框、单选、复选框等表单元素ng-bind：单向数据渲染，替代{{}}，避免页面加载闪烁问题ng-repeat：循环渲染列表，支持数组、对象遍历ng-if/ng-show/ng-hide：元素显示隐藏，ng-if移除DOM，ng-show控制css显示隐藏ng-click/ng-change：绑定点击、值改变事件ng-src/ng-href：动态绑定图片地址、链接地址，避免报错2、ng-if和ng-show的区别？项目中如何选择？核心区别是DOM渲染机制和性能：ng-if：条件不成立时，直接移除DOM节点，不占用页面资源；条件成立时重新创建DOM，会重新渲染、触发指令生命周期，有性能消耗ng-show：始终渲染DOM，只是通过display:none控制显示隐藏，切换速度快，但隐藏时依然占用DOM资源选择原则：频繁切换显示隐藏的元素，用ng-show页面加载后极少切换、或默认隐藏的大块内容，用ng-if，减少页面DOM节点数量，优化页面性能3、简单说说自定义指令的生命周期（compile、link）自定义指令核心两个钩子，执行顺序：先compile后pile（编译阶段）：只执行一次，在指令渲染前触发，主要用来处理DOM模板、修改结构，不处理数据和事件link（链接阶段）：每个指令实例都会执行，主要用来处理数据绑定、注册DOM事件、操作当前指令DOM，是开发中最常用的钩子五、路由与异步篇1、ngRoute和ui-router的区别？项目中为什么多用ui-router？ngRoute是AngularJS官方自带路由，ui-router是第三方增强路由，实际项目基本都用ui-router。核心区别：视图层级：ngRoute只支持单层视图，一个页面只能渲染一个模板；ui-router支持嵌套路由、多视图，可以实现页面局部嵌套渲染路由传参：ngRoute传参方式单一；ui-router支持url传参、state隐式传参，更灵活状态管理：ui-router以state状态管理路由，路由跳转基于状态名，不用硬写url，维护更方便2、AngularJS中$http的使用及拦截器怎么做？$http是框架封装的AJAX工具，基于promise异步机制，支持get、post、put、delete等请求方式。请求拦截器核心作用：统一处理请求头、token、加载状态、错误提示，避免每个接口重复写逻辑。拦截器分为四种场景：request：请求发送前，统一添加token、请求头requestError：请求发送失败拦截response：响应成功后，统一处理返回数据、关闭加载动画responseError：响应失败拦截，统一处理401、403、500等错误，做登录过期、弹窗提示六、常见问题与性能优化篇（面试加分）1、AngularJS页面加载出现{{}}闪烁问题怎么解决？原因：页面加载时，Angular脚本未执行完成，模板未编译，页面会短暂显示原始的{{变量名}}。三种解决方案：使用ng-bind替代{{}}，ng-bind编译完成后才渲染数据给根标签添加ng-cloak指令，框架内置样式会隐藏未编译的模板内容页面初始化默认隐藏容器，等Angular加载完成再显示2、AngularJS常见性能优化方案有哪些？减少脏值检测范围：尽量使用$digest代替$apply，避免全局检测优化ng-repeat：列表渲染添加trackby唯一值，避免重复渲染相同节点；长列表做分页、懒加载合理使用ng-if/ng-show：大量隐藏节点用ng-if移除DOM，减少监听数量销毁无用监听：页面离开、控制器销毁时，手动解绑$watch、事件监听、定时器，防止内存泄漏避免频繁触发检测：复杂计算、频繁变动的数据尽量节流防抖，减少$digest执行次数3、AngularJS内存泄漏的常见原因及解决方式？常见原因：定时器、原生事件监听、$watch监听未销毁全局作用域挂载过多变量，控制器销毁后数据未释放自定义指令DOM事件未解绑解决方式：监听控制器$destroy事件，在页面销毁时，清除定时器、解绑所有监听、置空无用变量。七、进阶面试题1、什么是$watch？常用的三种监听方式？$watch是Angular用来监听scope数据变化的方法，核心用于监听数据变动并执行自定义逻辑。三种监听方式：普通监听（浅监听）：只能监听简单数据类型（字符串、数字、布尔），无法监听对象、数组内部变化深度监听：第三个参数设置为true，可以递归监听对象、数组内部属性变化，消耗性能较高，按需使用集合监听$watchCollection：专门监听数组、对象集合，