AngularJS 是一个由 Google 维护的开源 JavaScript 框架，用于构建动态的单页应用程序（SPA），TodoMVC 则是一个用于比较不同前端框架实现方式的共同项目，它提供了一个简单的任务列表应用，允许开发者展示其框架的特性，本文将分析使用 AngularJS 实现的 TodoMVC 应用，并介绍相关的技术细节。
数据模型与控制器
在 AngularJS 中，MVC（Model-View-Controller）模式被用作基本架构，对于 TodoMVC，模型（Model）是任务列表的数据结构，视图（View）是用户界面，而控制器（Controller）则是连接模型和视图的逻辑。
每个待办事项可以用一个 JavaScript 对象表示，包含属性如 title、completed 等，在 AngularJS 中，我们通常将这些对象保存在作用域（$scope）中，它是控制器与视图之间的数据桥梁。
$scope.todos = [
{ title: 'Learn AngularJS', completed: false },
// ...
];
控制器负责处理用户的输入，如添加新任务或标记完成的任务，通过注入 $scope 服务，我们可以在控制器中操作模型。
$scope.addTodo = function() {
$scope.todos.push({ title: $scope.todoTitle, completed: false });
$scope.todoTitle = '';
};
视图与数据绑定
AngularJS 的一个重要特性是数据绑定，在 TodoMVC 中，这意味着当模型中的数据变化时，视图会自动更新，使用 ng-repeat 指令可以遍历 todos 数组，并为每个待办事项创建列表项。
<ul>
<li ng-repeat="todo in todos">
{{ todo.title }}
</li>
</ul>
当 $scope.todos 发生变化时，ng-repeat 会自动更新 DOM，使用 ng-model 可以实现表单输入与作用域变量之间的双向绑定。
<input type="text" ng-model="todoTitle"> <button ng-click="addTodo()">Add</button>
服务与模块化
为了提高代码的可维护性和可测试性，AngularJS 鼓励使用服务（Service）来封装功能逻辑，在 TodoMVC 中，我们可以创建一个 TodoService 来管理待办事项的增删改查。
angular.module('todomvc', [])
.factory('TodoService', function() {
var todos = [];
return {
add: function(todo) { /* ... */ },
remove: function(index) { /* ... */ },
// ...
};
});
通过依赖注入，我们可以在控制器中使用这个服务。
angular.module('todomvc')
.controller('TodoCtrl', function($scope, TodoService) {
$scope.todos = TodoService.get();
// ...
});
相关问题与解答
Q1: AngularJS 中的 $scope 是什么？
A1: $scope 是 AngularJS 中的一个核心服务，它提供了一个模型，可以在控制器和视图之间共享数据，通过 $scope，我们可以在控制器中定义变量和函数，并在视图中访问和修改它们。
Q2: 为什么在 AngularJS 中要使用服务？
A2: 服务在 AngularJS 中是一种单例对象，用于封装可重用的功能逻辑，使用服务可以使代码更加模块化，便于维护和测试，服务还提供了一种在不同组件之间共享数据和方法的方式，而不需要依赖于特定的控制器实例。
