AngularJS 应用（超详细）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言

在现代 Web 开发领域，AngularJS 作为一款经典的前端框架，凭借其简洁的语法和强大的功能，持续吸引着开发者构建高效、灵活的单页应用（SPA）。无论是编程初学者还是有一定经验的中级开发者，理解 AngularJS 的核心机制和开发模式，都能为后续学习其他框架（如 Angular 或 Vue.js）奠定坚实的基础。本文将以“AngularJS 应用”为主题，通过循序渐进的方式，结合实际案例与代码示例，帮助读者掌握从基础概念到进阶技巧的完整知识体系。

AngularJS 的核心概念

MVVM 架构与数据绑定

AngularJS 的设计思想源于 MVVM（Model-View-ViewModel） 架构，其核心是通过数据绑定（Data Binding）实现视图与数据的实时同步。

• Model：代表数据层，通常由 JavaScript 对象或外部 API 提供。
• View：即 HTML 模板，负责呈现用户界面。
• ViewModel：作为中间层，通过 AngularJS 的控制器（Controller）和作用域（Scope）管理数据与视图的交互。

数据绑定的比喻：可以将数据绑定想象成“水管系统”。当用户修改表单中的输入值时，数据会像水流一样自动流向 ViewModel，同时 ViewModel 的变化也会“反向流动”到视图中，确保两者始终保持一致。

双向数据绑定示例

<!-- HTML 模板 -->
<div ng-app="myApp" ng-controller="MyController">
  <input type="text" ng-model="user.name">
  <p>当前输入值：{{ user.name }}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
  $scope.user = { name: '初始值' };
});
</script>

在此示例中，ng-model 指令实现了输入框与 user.name 属性的双向绑定，用户输入的内容会实时更新到视图中。

指令系统：构建可复用的 UI 组件

AngularJS 的 指令（Directives） 是其区别于其他框架的核心特性之一。指令可以看作是 HTML 的“扩展语法”，允许开发者通过声明式语法定义组件行为。

常用内置指令

自定义指令示例

app.directive('highlight', function() {
  return {
    restrict: 'A', // 仅支持属性形式调用  
    link: function(scope, element, attrs) {
      element.css('background-color', 'yellow'); // 设置背景颜色
    }
  };
});

在 HTML 中使用：

<p highlight>这段文字会被高亮</p>

依赖注入（Dependency Injection）

AngularJS 通过 依赖注入（DI） 管理组件间的依赖关系，避免了直接创建对象的复杂性。例如，控制器可以声明需要的依赖项（如 $http 服务），框架会自动将其注入。

依赖注入的比喻

想象一个餐厅的后厨：厨师不需要自己种植蔬菜或养殖牛羊，而是通过供应链（DI 容器）获取所需的食材（依赖项）。同样，AngularJS 的组件只需声明所需依赖，框架会负责提供。

app.controller('MyController', function($scope, $http) {
  $http.get('/api/data').then(function(response) {
    $scope.items = response.data;
  });
});

在此代码中，$http 服务被注入到控制器中，用于发起 HTTP 请求。

核心功能详解

模块化开发

AngularJS 通过 模块（Module） 组织代码，每个模块可以包含控制器、指令、服务等组件。模块化设计提升了代码的可维护性和扩展性。

模块的创建与依赖注入

// 定义主模块，并依赖于 'myServiceModule'
var mainApp = angular.module('mainApp', ['myServiceModule']);

作用域（Scope）与事件传播

作用域是 AngularJS 中数据与视图的连接层，支持父子层级结构。事件（如 $emit 和 $broadcast）允许作用域之间传递消息。

作用域事件传播的比喻

父子作用域的关系类似于家庭成员间的沟通：

• $emit：类似“自下而上”通知父母
• $broadcast：类似“自上而下”通知子女

// 子作用域向父作用域发送事件
$scope.$emit('customEvent', { message: 'Hello Parent!' });

// 父作用域监听事件
$scope.$on('customEvent', function(event, data) {
  console.log(data.message); // 输出 'Hello Parent!'
});

构建实际案例：待办事项应用

案例目标

实现一个简单的待办事项列表应用，包含以下功能：

1. 添加新任务
2. 显示所有任务
3. 标记任务为完成
4. 删除任务

代码实现步骤

1. 创建 AngularJS 模块与控制器

var todoApp = angular.module('todoApp', []);

todoApp.controller('TodoController', function($scope) {
  $scope.tasks = [
    { text: '学习 AngularJS', completed: false },
    { text: '完成项目原型', completed: true }
  ];

  $scope.addTask = function() {
    if ($scope.newTask.trim() !== '') {
      $scope.tasks.push({
        text: $scope.newTask,
        completed: false
      });
      $scope.newTask = '';
    }
  };

  $scope.deleteTask = function(index) {
    $scope.tasks.splice(index, 1);
  };
});

2. HTML 模板设计

<div ng-app="todoApp" ng-controller="TodoController">
  <h2>待办事项</h2>
  
  <!-- 添加新任务 -->
  <input type="text" ng-model="newTask" placeholder="输入新任务">
  <button ng-click="addTask()">添加</button>
  
  <!-- 显示任务列表 -->
  <ul>
    <li ng-repeat="task in tasks">
      <input type="checkbox" ng-model="task.completed">
      <span ng-class="{completed: task.completed}">{{ task.text }}</span>
      <button ng-click="deleteTask($index)">删除</button>
    </li>
  </ul>
</div>

3. 样式与交互增强

.completed {
  text-decoration: line-through;
  color: #888;
}

进阶技巧与最佳实践

性能优化

1. 避免嵌套作用域：减少层级过深的 $scope 导致的性能损耗。
2. 使用 track by 优化 ng-repeat：

   <li ng-repeat="task in tasks track by $index">...</li>
   

3. 懒加载与分页：对大数据量列表进行分页处理。

测试 AngularJS 应用

通过 Jasmine 和 Karma 可以编写单元测试，例如测试控制器逻辑：

describe('TodoController', function() {
  beforeEach(module('todoApp'));

  var $controller;

  beforeEach(inject(function(_$controller_){
    $controller = _$controller_;
  }));

  it('should add a new task', function() {
    var $scope = {};
    var controller = $controller('TodoController', { $scope: $scope });
    $scope.newTask = '测试任务';
    $scope.addTask();
    expect($scope.tasks.length).toBe(3);
  });
});

AngularJS 与 Angular 的对比

虽然 AngularJS 是 Angular 的前身，但两者在设计理念上存在显著差异：

• AngularJS 采用 脏检查（Dirty Checking） 检测数据变化，而 Angular 使用 Zone.js 实现响应式更新。
• Angular 采用 组件化架构，而 AngularJS 更依赖指令和作用域。

结论

通过本文的讲解，读者应能掌握 AngularJS 的核心概念、开发模式及实际应用技巧。从数据绑定到模块化设计，再到复杂案例的实现，AngularJS 为构建高效 Web 应用提供了强大的工具链。尽管现代开发趋势转向了 Angular 或 Vue.js，但理解 AngularJS 的底层逻辑，仍能帮助开发者更好地理解前端框架的设计哲学。

对于初学者，建议从简单案例入手，逐步实践并理解作用域、指令和依赖注入的交互机制；中级开发者则可探索高级主题，如性能优化或与第三方库的集成。通过持续练习与项目实践，读者将能够独立开发出功能丰富的 AngularJS 应用，并为后续学习其他框架打下扎实的基础。