AngularJS 面试题及答案（实战版）.docxVIP

AngularJS面试题及答案（实战版）

一、基础概念题

请简述AngularJS的核心特性，以及它和jQuery的本质区别？

答案：AngularJS核心特性包括MVVM架构、双向数据绑定、依赖注入、指令系统、模块化开发。和jQuery的本质区别：jQuery是DOM操作库，核心是“操作元素”；AngularJS是前端框架，核心是“数据驱动视图”，无需手动操作DOM，通过数据变化自动更新页面，同时提供了完整的项目架构方案（模块、控制器、服务等），更适合中大型应用。

AngularJS中的rootScope有什么关系？作用域继承是怎样的？

答案：scope是控制器与视图之间的桥梁，每个控制器都有自己的scope实例；rootScope是所有scope的根作用域，全局唯一，可在整个应用中共享数据。作用域继承基于原型链：子控制器的scope会继承父控制器scope的属性和方法，当子作用域查找属性时，若自身没有，会向上遍历原型链直到$rootScope；但子作用域若定义了与父作用域同名的属性，会覆盖父作用域的属性（原型链屏蔽）。

解释AngularJS中的依赖注入（DI），以及它的核心优势是什么？

答案：依赖注入是AngularJS中一种设计模式，指组件（控制器、服务等）所需的依赖（如其他服务、$scope等）无需手动创建，而是由AngularJS框架自动实例化并注入到组件中。核心优势：①降低组件间耦合度，便于单元测试（可轻松替换依赖的模拟对象）；②简化代码，无需关注依赖的创建和管理；③提高代码可维护性和复用性。

二、核心特性应用题

如何实现AngularJS的双向数据绑定？请用代码示例说明基本原理。

divng-app=myAppng-controller=myCtrl

inputtype=textng-model=name

p{{name}}/p

/div

script

varapp=angular.module(myApp,[]);

app.controller(myCtrl,function($scope){

$=张三;

//手动监听数据变化

$scope.$watch(name,function(newVal,oldVal){

console.log(姓名从,oldVal,变为,newVal);

});

});

/script

原理：输入框通过ng-model绑定，输入时触发scope数据变化，AngularJS触发digest循环，遍历所有watch列表，检测到数据变化后更新视图；反之，若通过代码修改，也会触发watch回调，同步更新输入框值。

答案：AngularJS双向绑定基于“脏检查机制”（digest循环），通过watch监听数据变化，$apply触发数据同步。

示例代码：

AngularJS中的指令（Directive）有什么作用？请自定义一个指令，实现点击元素显示当前时间。

divng-app=myApp

show-time/show-time!--自定义元素指令--

/div

script

varapp=angular.module(myApp,[]);

app.directive(showTime,function(){

return{

restrict:E,//限制指令为元素（E=Element）

template:buttonng-click=showCurrentTime()点击显示时间/buttonp{{time}}/p,

controller:function($scope){

$scope.showCurrentTime=function(){

$scope.time=newDate().toLocaleString();

};

}

};

});

/script

说明：restrict可选值：E（元素）、A（属性）、C（类名）、M（注释），默认A；template定义指令的HTML模板，也可通过templateUrl加载外部模板。

答案：指令是AngularJS扩展HTML功能的核心，可自定义标签、属性、类名等，将复杂逻辑封装为可复用的组件。

自定义指令示例：

AngularJS中的服务（Service）有哪几种？请用$http服务实现一个GET请求，获取数据