AngularJS API（手把手讲解）

AngularJS API 入门：从零开始掌握前端数据绑定

如果你正在学习现代 Web 开发，那么 AngularJS 一定在你的技术栈探索清单上。虽然它已不再是主流框架（如 Angular 2+ 已完全重写），但它的设计理念——特别是双向数据绑定和模块化架构——仍然影响着今天的前端生态。今天我们就来深入聊聊 AngularJS API，带你从零开始理解它的核心机制。

想象一下，你正在写一个待办事项列表应用。传统方式下，你需要手动操作 DOM，监听事件，再更新页面内容。而使用 AngularJS API，你只需声明数据和逻辑，框架会自动帮你同步视图和数据，就像魔法一样。

模块化开发：AngularJS 的基石

在 AngularJS 中，一切从模块（Module）开始。模块是组织代码的容器，就像一个积木盒，把控制器、服务、指令等组件统一管理。

// 定义一个名为 'todoApp' 的模块
var app = angular.module('todoApp', []);

上面这行代码创建了一个名为 todoApp 的模块，它目前没有依赖项。你可以把它想象成一个项目的工作台，所有功能都从这里出发。

✅ 注意：angular.module() 是 AngularJS API 中最基础的方法之一，用于注册或获取模块。

接下来，我们把这个模块和页面绑定起来：

<div ng-app="todoApp">
  <!-- 页面内容将由 todoApp 模块控制 -->
</div>

ng-app 指令告诉 AngularJS 从哪个模块开始启动应用。这就像打开灯的开关，一旦开启，整个框架就会接管页面。

数据绑定：视图与模型的双向通信

双向数据绑定是 AngularJS 最令人惊叹的功能。它意味着你修改模型（Model），视图（View）自动更新；你修改视图，模型也同步改变。

我们来看一个实际例子：

<div ng-app="todoApp">
  <input type="text" ng-model="username" placeholder="请输入用户名">
  <p>你好，{{ username }}！</p>
</div>

<script>
  var app = angular.module('todoApp', []);

  // 模块创建成功后，可以添加控制器
  app.controller('MainController', function($scope) {
    // $scope 是 AngularJS 的数据上下文，用于绑定数据
    $scope.username = '小明'; // 初始化用户名
  });
</script>

代码解析：

ng-model="username"：将输入框的值与 $scope.username 绑定
{{ username }}：插值表达式，显示 username 的值
$scope.username = '小明'：初始化数据

当你在输入框中输入内容时，username 会实时更新，页面上的 p 标签也会立刻变化。这就是 AngularJS API 提供的“自动同步”能力。

📌 小贴士：$scope 就像一个数据容器，所有绑定的数据都放在这里。它是 AngularJS API 的核心对象之一。

控制器：业务逻辑的承载者

控制器（Controller）负责管理视图的数据和行为。它就像是一个“管家”，负责处理用户操作、调用服务、更新数据。

app.controller('TodoController', function($scope) {
  // 初始化待办事项列表
  $scope.todos = [
    { text: '学习 AngularJS', done: false },
    { text: '写博客', done: true }
  ];

  // 添加新任务的方法
  $scope.addTodo = function() {
    if ($scope.newTodoText) {
      $scope.todos.push({
        text: $scope.newTodoText,
        done: false
      });
      $scope.newTodoText = ''; // 清空输入框
    }
  };

  // 删除任务的方法
  $scope.removeTodo = function(index) {
    $scope.todos.splice(index, 1); // 从数组中移除指定项
  };
});

补充说明：

$scope.todos：一个数组，存储所有待办事项
$scope.addTodo：添加新任务的函数
splice(index, 1)：从数组中删除一个元素，是 JavaScript 原生方法，但常用于 AngularJS API 中

在 HTML 中使用控制器：

<div ng-controller="TodoController">
  <input type="text" ng-model="newTodoText" placeholder="添加新任务">
  <button ng-click="addTodo()">添加</button>

  <ul>
    <li ng-repeat="todo in todos">
      <input type="checkbox" ng-model="todo.done">
      <span ng-class="{completed: todo.done}">{{ todo.text }}</span>
      <button ng-click="removeTodo($index)">删除</button>
    </li>
  </ul>
</div>

指令解析：

ng-controller="TodoController"：指定当前区域由哪个控制器管理
ng-repeat="todo in todos"：遍历 todos 数组，为每一项生成一个 <li>
ng-click="addTodo()"：点击按钮时触发 addTodo 方法
$index：ng-repeat 提供的内置变量，表示当前项的索引

💡 这些指令都是 AngularJS API 的重要组成部分，它们让 HTML 变得“智能”。

服务（Service）：可复用的业务逻辑

在大型应用中，我们希望把重复的逻辑抽离出来。AngularJS 提供了 service 和 factory，用于创建可注入的可复用组件。

app.service('TodoService', function() {
  // 定义一个服务，用于处理待办事项的存储
  var todos = [];

  // 添加任务
  this.add = function(text) {
    todos.push({
      text: text,
      done: false
    });
  };

  // 获取所有任务
  this.getAll = function() {
    return todos;
  };

  // 删除任务
  this.remove = function(index) {
    todos.splice(index, 1);
  };

  // 清空所有任务
  this.clear = function() {
    todos = [];
  };
});

然后在控制器中注入这个服务：

app.controller('TodoController', function($scope, TodoService) {
  // 通过依赖注入，获取服务实例
  $scope.todos = TodoService.getAll();

  $scope.addTodo = function() {
    if ($scope.newTodoText) {
      TodoService.add($scope.newTodoText);
      $scope.newTodoText = '';
      $scope.todos = TodoService.getAll(); // 重新获取数据
    }
  };

  $scope.removeTodo = function(index) {
    TodoService.remove(index);
    $scope.todos = TodoService.getAll();
  };

  $scope.clearAll = function() {
    TodoService.clear();
    $scope.todos = [];
  };
});

为什么用服务？

代码更清晰，逻辑分离
多个控制器可以共享同一份逻辑
易于测试和维护

✅ 服务是 AngularJS API 中实现“松耦合”设计的关键机制。

指令（Directive）：自定义 HTML 标签

指令是 AngularJS 最强大的功能之一。你可以创建自己的 HTML 标签，让框架“理解”它们的含义。

app.directive('todoItem', function() {
  return {
    restrict: 'E', // 表示这个指令是作为元素使用的
    scope: {
      todo: '=' // 与父作用域绑定，支持双向绑定
    },
    template: `
      <div class="todo-item">
        <input type="checkbox" ng-model="todo.done">
        <span ng-class="{completed: todo.done}">{{ todo.text }}</span>
        <button ng-click="remove()">删除</button>
      </div>
    `,
    link: function(scope, element, attrs) {
      // link 函数用于操作 DOM
      // 可以在这里添加额外的事件或样式
      element.on('mouseenter', function() {
        element.css('background-color', '#f0f0f0');
      });

      element.on('mouseleave', function() {
        element.css('background-color', '');
      });
    }
  };
});

使用自定义指令：

<div ng-controller="TodoController">
  <todo-item ng-repeat="todo in todos" todo="todo" remove="removeTodo($index)"></todo-item>
</div>

🔧 restrict: 'E' 表示这个指令作为元素使用，比如 <todo-item>。
scope: { todo: '=' } 实现了数据绑定，父级的 todo 会传入子作用域。

指令的好处：

可复用组件
封装复杂逻辑
提升代码可读性

实用工具函数：过滤器与事件处理

AngularJS 还提供了丰富的工具函数，比如过滤器（Filter）和事件绑定。

过滤器：格式化数据

<!-- 显示当前时间，格式化为中文日期 -->
<p>现在是：{{ currentTime | date:'yyyy年MM月dd日 HH:mm:ss' }}</p>

app.controller('TimeController', function($scope) {
  $scope.currentTime = new Date(); // 当前时间
});

✅ date 过滤器是 AngularJS API 中最常用的格式化工具。

事件处理：`ng-click` 和 `ng-change`

<button ng-click="count++">点击 +1</button>
<p>点击次数：{{ count }}</p>

<select ng-model="selectedCity" ng-change="onCityChange()">
  <option value="北京">北京</option>
  <option value="上海">上海</option>
  <option value="广州">广州</option>
</select>

app.controller('CounterController', function($scope) {
  $scope.count = 0;

  $scope.onCityChange = function() {
    alert('你选择了：' + $scope.selectedCity);
  };
});

📌 ng-change 在下拉框值改变时触发，常用于实时响应用户输入。

总结：从 API 到实战

通过本文，我们系统学习了 AngularJS API 的核心机制：模块化、数据绑定、控制器、服务、指令和过滤器。这些概念虽然诞生于 2010 年代，但其设计思想至今仍有借鉴意义。

尽管 AngularJS 已被新框架取代，但掌握它的原理，能帮助你更深入理解现代框架（如 Vue 3.0、React）的数据流机制。尤其是“声明式编程”和“数据驱动视图”的理念，正是现代前端开发的基石。

如果你正在学习前端，不妨从一个简单的待办事项应用开始，亲手实践这些 API。你会发现，代码不再只是“命令”，而是一种“描述”。

最后提醒一句：不要只盯着框架版本，更要理解“为什么这么设计”。这才是技术成长的真正捷径。