Angular.js工作原理是什么？如何深入理解其核心机制？

Angular.js 作为一款经典的前端 MVVM 框架，其工作原理围绕数据绑定、依赖注入和模块化展开，通过一套精巧的机制实现了声明式的开发模式，理解其核心原理，有助于开发者更好地驾驭框架,构建动态的单页应用。

初始化与编译流程

Angular.js 的启动始于 DOMContentLoaded 事件，或通过 angular.bootstrap() 手动初始化，核心步骤包括：

1. DOM 加载与模块解析：框架会遍历 DOM，查找 ng-app 指令，该指令标记了 Angular 应用的根作用域，找到后，根据指令值加载对应的模块集合。
2. 依赖注入（DI）容器创建：每个模块都会注册配置块（config）、运行块（run）以及服务、指令等，Angular 通过 $injector 服务构建依赖注入容器，管理所有组件的生命周期和依赖关系。
3. 编译阶段（$compile）：$compile 服务是 Angular 的核心，它递归遍历 DOM 树，处理所有 Angular 指令（如 ng-model、ng-repeat）和表达式，编译过程分为两个阶段：
   • 编译（Compile）：将指令与 DOM 元素关联，生成模板函数（template function），不涉及数据绑定。
   • 链接（Link）：将模板函数与作用域（$scope）关联，建立数据绑定关系，并执行指令的链接逻辑，生成响应式视图。

数据绑定机制

Angular.js 的核心特性是双向数据绑定，通过脏检查（Dirty Checking）实现，其流程如下：

1. 表达式解析与求值：视图中的 {{ expression }} 或指令属性（如 ng-bind="expression"``）会被$parse` 服务解析为函数，并在作用域变化时重新求值。
2. 作用域与模型同步：当用户通过 ng-model 修改输入框时，会触发 $scope 上的属性赋值，$scope.$apply() 会被调用（显式或隐式），启动脏检查。
3. 脏检查流程：$digest 循环会遍历 $scope 上的所有 watchers（通过 $watch 注册），比较当前值与上次值的差异，若发现变化，则触发对应的回调函数，更新视图。

Watcher 示例：
| 监听表达式 | 监听回调函数 | 触发时机 |
|——————|—————————-|——————————|
| user.name | function(newVal, oldVal){} | user.name 属性值变化时 |
| items.length | function(){ renderList() } | items 数组长度变化时 |

依赖注入（DI）系统

Angular.js 的依赖注入是其模块化开发的基础，通过 $injector 服务实现，四种依赖查找方式包括：

1. 推断式注入：通过函数参数名推断依赖（如 function($scope, $http)），但压缩代码后可能失效。
2. 标注式注入：通过 $inject 数组显式声明依赖（如 myCtrl.$inject = ['$scope', '$http']），兼容代码压缩。
3. 内联注入：使用 $injector 的 annotate 方法动态标注（如 function($scope){}）。
4. 常量/值/服务/工厂：通过 module.constant()、module.service() 等方法注册不同类型的依赖，确保单例和延迟加载。

生命周期与作用域

作用域（$scope） 是连接控制器与视图的桥梁，具有原型继承的特性，每个指令或控制器都会创建或继承一个作用域，作用域的层级与 DOM 树结构对应，作用域的生命周期包括：

• 创建：通过 $new() 方法创建，继承父作用域。
• 事件传播：$emit() 向上触发事件，$broadcast() 向下传播，$on() 监听事件。
• 销毁：通过 $destroy() 方法移除，释放相关资源，避免内存泄漏。

控制器（Controller） 通过 $scope 暴露模型和方法，但 Angular 推荐使用组件（Component）和服务（Service）替代控制器，以遵循“关注点分离”原则。

指令与模板系统

指令（Directive）是 Angular 扩展 HTML 的核心机制，通过 directive() 方法定义，指令的编译与链接过程由 $compile 服务协调，支持多种配置项：

• 模板替换：通过 template 或 templateUrl 替换当前 DOM 元素。
• 作用域隔离：通过 scope: {} 创建独立作用域，避免污染父作用域。
• 控制器与链接函数：控制器用于暴露 API，链接函数用于操作 DOM 和绑定事件。

ng-repeat 指令通过遍历数组动态创建 DOM 节点，并为每个节点创建子作用域，实现列表数据的响应式渲染。

Angular.js 通过 $compile 实现模板编译与链接，依赖注入管理组件生命周期，脏检查机制保障数据同步，指令系统扩展 HTML 能力，这些核心原理共同构成了 Angular.js 的响应式开发框架，尽管现代前端生态已向 Angular、React 等演进,但其设计思想仍对开发者具有重要启发意义。