AngularJS 介绍

Posted on Edited on Views:

AngularJS 是 Google 开发的前端 MVC 框架，版本为 1.x，用于构建动态单页应用（SPA）。它是现代前端框架的”祖师爷”之一，深刻影响了后来的 Angular、React、Vue 的设计思路。

一、历史定位

2009 年：Google 发布 AngularJS 1.0
2014 年：推出 Angular 2.0（完全重写，改名 Angular）
2016 年：Angular 2/4/5 陆续发布
2016 年起：AngularJS 进入 LTS 维护模式
2022 年 12 月：AngularJS 正式停止维护（EOL）

注意： AngularJS（1.x）和 Angular（2+）是完全不同的两个框架，只是名字相似。

二、核心特性

1. 双向数据绑定（Two-Way Binding）

1
2
<input ng-model="name" placeholder="请输入姓名">
<p>Hello, {{name}}!</p>
  • 视图变化 → 模型更新
  • 模型变化 → 视图更新
  • 无需手动 DOM 操作

2. 依赖注入（Dependency Injection）

1
2
3
4
5
6
7
8
9
10
11
12
13
angular.module('myApp', [])
  .factory('userService', function($http) {
    return {
      getUser: function(id) {
        return $http.get('/api/users/' + id);
      }
    };
  })
  .controller('UserCtrl', function($scope, userService) {
    userService.getUser(1).then(function(res) {
      $scope.user = res.data;
    });
  });

3. 指令系统（Directives）

AngularJS 允许你扩展 HTML 标签：

内置指令 作用
ng-model 双向数据绑定
ng-repeat 循环渲染
ng-if / ng-show / ng-hide 条件显示
ng-click 点击事件
ng-submit 表单提交
ng-include 引入模板
ng-switch 切换模板
ng-class 动态类名
ng-bind 安全绑定（防 XSS）

三、核心概念图解

┌─────────────────────────────────────────┐
│              View (HTML)                 │
│  {{name}}  ng-repeat  ng-click           │
│         ▲                                │
│         │ 数据绑定                        │
│         ▼                                │
│              Scope (数据模型)             │
│         ▲                                │
│         │ 依赖注入                        │
│         ▼                                │
│  Controller (业务逻辑)                    │
│         ▲                                │
│         │ 调用                          │
│         ▼                                │
│  Service / Factory (共享逻辑)             │
│         ▲                                │
│         │ 通信                          │
│         ▼                                │
│  Directive (DOM 操作 / 扩展)              │
└─────────────────────────────────────────┘

四、AngularJS 的运行原理

1. 页面加载 → AngularJS 启动
2. 编译阶段（Compilation）
   - 扫描 DOM，识别 ng-* 指令
   - 绑定数据和事件
3. 数据绑定阶段
   - 建立 $scope 与视图的联系
4. 事件触发（输入、点击、AJAX 回调）
5. Digest 循环（脏检查）
   - 遍历所有 watcher，检查数据是否变化
   - 如果有变化 → 更新视图 → 再次检查 → 直到稳定
6. 重复步骤 4-5

性能问题的根源：

  • 每个 {{}} 绑定产生一个 watcher
  • 1000 个 watcher = 1000 次检查
  • 嵌套 scope 会让检查呈指数增长
  • 这就是为什么 Angular（2+）引入了 Change Detection 优化和 Zone.js

五、AngularJS vs 现代框架

维度 AngularJS (1.x) Angular (2+) React Vue
数据绑定 双向（$scope） 单向 + 装饰器 单向 双向可选
渲染方式 直接 DOM 虚拟 DOM 虚拟 DOM 虚拟 DOM
组件化 指令模拟 原生组件 JSX 组件 .vue 文件
TypeScript 不支持 原生支持 支持 支持
性能 差（脏检查） 好 好 好
学习曲线 低 高 中 低-中
状态管理 $scope 传递 RxJS + Store Redux/Zustand Pinia/Vuex
维护状态 ❌ 已停止 ✅ 活跃 ✅ 活跃 ✅ 活跃