AngularJS工作原理是什么？依赖注入与双向数据绑定如何实现？

AngularJS 作为一款经典的前端 JavaScript 框架，其工作原理围绕数据绑定、依赖注入和模块化展开，通过一套清晰的机制实现了动态单页应用的高效开发，以下从核心机制、执行流程和关键技术三个维度解析其工作原理。

核心机制：数据绑定与依赖注入

AngularJS 的核心优势在于双向数据绑定（Two-Way Data Binding），这一机制通过 脏值检查（Dirty Checking） 和 观察者模式 实现，当数据模型（Model）发生变化时，AngularJS 会触发digest循环，遍历所有观察者（Watchers），对比新旧值，若检测到差异则自动更新视图（View），反之，视图中的表单输入通过ng-model指令绑定到模型，用户操作也会同步回写数据,实现视图与模型的实时同步。

依赖注入（Dependency Injection, DI）则是 AngularJS 实现松耦合架构的关键，框架通过内置的 injector 服务，在组件初始化时自动解析并注入其依赖的模块或服务，开发者无需手动管理对象创建，在控制器中声明 $scope 和 $http 服务，AngularJS 会自动注入这些依赖,简化了代码测试和维护。

执行流程：从启动到渲染

AngularJS 应用的执行流程始于文档加载完成后的自动初始化,主要分为三个阶段：

引入与加载

通过在 HTML 中引入 angular.js 脚本，并添加 ng-app 指令标记应用根元素（如 <body ng-app="myApp">），AngularJS 会在 DOMContentLoaded 事件触发时自动启动，定位到 ng-app 指令的作用域,初始化应用模块。

编译与链接（Compile & Link）

初始化后，AngularJS 启动编译阶段，遍历 DOM 树，识别 AngularJS 指令（如 ng-repeat、ng-show）和表达式（如 {{ expression }}），编译过程分为两步：

• 编译（Compile）：将指令转换为 JavaScript 函数，生成模板函数（TFunction），处理 DOM 结构转换（如 ng-repeat 动态生成列表项）。
• 链接（Link）：将模板函数与作用域（Scope）关联，建立数据绑定关系，链接阶段会创建 Watchers，监听模型变化，并设置事件监听器（如点击、输入事件）。

运行时数据同步

链接完成后，应用进入运行阶段，当模型数据通过 $scope.$apply() 或用户交互（如输入框修改）发生变化时，AngularJS 会触发 $digest 循环，从根作用域开始逐层检查所有 Watchers，若发现变化则更新视图,完成数据同步。

关键技术：指令、作用域与服务

指令（Directives）

指令是 AngularJS 扩展 HTML 的核心，通过声明式语法封装可复用的 DOM 行为，常用指令包括：

• 内置指令：ng-model（数据绑定）、ng-repeat（列表渲染）、ng-if（条件渲染）、ng-controller（控制器声明）。
• 自定义指令：通过 module.directive() 定义，可实现复杂交互逻辑，如 myDirective 可封装拖拽、图表等组件。

作用域（Scope）

作用域是连接控制器与视图的数据桥梁，继承自 $rootScope（根作用域），每个控制器或指令会创建一个子作用域，形成作用域链，作用域的核心功能包括：

• 数据存储：通过 $scope 对象存储模型数据。
• 事件传播：通过 $emit（向上）、$broadcast（向下）、$on 实现作用域间通信。
• 生命周期：通过 $destroy 事件清理未使用的资源,避免内存泄漏。

服务（Services）

服务是 AngularJS 提供的可复用单例对象，通过依赖注入机制提供给组件使用，核心服务包括：

• $http：处理 AJAX 请求，支持 JSONP 和 Promise 风格回调。
• $location：封装浏览器 URL 地址，实现路由与地址栏同步。
• $timeout / $interval：封装定时器，与 AngularJS 生命周期集成，避免内存泄漏。

以下为 AngularJS 核心服务功能对比：

AngularJS 通过数据绑定实现视图与模型的自动同步，依赖注入简化组件开发，指令系统扩展 HTML 语义化能力，而作用域和服务机制则构建了清晰的应用架构，尽管当前前端技术栈已演进，但其设计思想（如模块化、数据驱动）仍对后续框架产生深远影响,理解其工作原理有助于开发者把握前端框架的核心设计逻辑。