源代码：
<html ng-app="nameApp"> <head> <meta charset="utf-8"> <title>Angular.js Example</title> <script src="angular/angular.js"></script> <script> var nameApp = angular.module('nameApp', []); nameApp.controller('NameCtrl', function ($scope){ $scope.names = ['Larry', 'Moe']; $scope.addName = function() { $scope.names.push($scope.enteredName); $scope.enteredName = ''; }; $scope.removeName = function(name) { var i = $scope.names.indexOf(name); $scope.names.splice(i, 1); }; }); </script> </head> <body ng-controller="NameCtrl"> <ul> <li ng-repeat="name in names">{{name}} <a href="" ng-click="removeName(name)">remove me</a> </li> </ul> <form ng-submit="addName()"> <input type="text" ng-model="enteredName"> <input type="submit" value="add"> </form> </body> </html>
在这段 Angular 代码中，我们可以看到一个基本的 Angular 应用的构建过程，涵盖了从模块的创建到控制器的定义，以及视图的动态交互实现。下面，我将逐一解析这段代码的每一个部分和它的功能。
1. Angular 应用的初始化
<html ng-app=`nameApp`>
这行代码定义了一个 Angular 应用的根元素。ng-app 属性指定 AngularJS 模块的名称，这里是 nameApp。该模块在 <script> 标签中定义并配置。这是 AngularJS 初始化并识别整个应用应当控制的 DOM 范围的标记。
2. 创建 Angular 模块
var nameApp = angular.module(`nameApp`, []);
这行 JavaScript 代码创建了一个名为 nameApp 的 AngularJS 模块。angular.module 是一个用于创建、注册和获取 Angular 模块的方法。nameApp 是模块的名称，紧随其后的空数组 [] 表示该模块不依赖于其他模块。
3. 定义控制器
nameApp.controller(`NameCtrl`, function ($scope){ $scope.names = ['Larry', 'Moe']; $scope.addName = function() { $scope.names.push($scope.enteredName); $scope.enteredName = ''; }; $scope.removeName = function(name) { var i = $scope.names.indexOf(name); $scope.names.splice(i, 1); }; });
在这个部分，我们定义了 NameCtrl 控制器。控制器是用来建立视图（HTML）与模型（JavaScript 变量）之间的数据绑定和逻辑处理的地方。
$scope.names初始化为一个包含两个名字的数组。$scope.addName是一个函数，用于将输入框中的名字添加到列表中，并清空输入框。
$scope.removeName是一个函数，用于从列表中移除一个特定的名字。
4. 数据绑定和视图更新
<body ng-controller=`NameCtrl`>
ng-controller 指令将 NameCtrl 控制器与 <body> 标签关联起来，这意味着在这个 <body> 内部的所有元素都可以访问到 NameCtrl 控制器中的数据和方法。
<ul> <li ng-repeat=`name in names`>{{name}} <a href=`` ng-click=`removeName(name)`>remove me</a> </li> </ul>
ng-repeat指令在<li>标签上创建了一个循环，遍历$scope.names数组中的每一个元素。对于数组中的每个元素，都将生成一个<li>元素。{{name}}是 AngularJS 的插值表达式，用于数据绑定，将 JavaScript 变量显示在 HTML 视图中。ng-click指令添加了一个点击事件监听器，当点击 “remove me” 链接时，会调用$scope.removeName(name)函数。
<form ng-submit=`addName()`> <input type="text" ng-model=`enteredName`> <input type="submit" value="add"> </form>
<form>标签上的ng-submit指令处理表单提交事件，触发addName()函数。ng-model指令在<input>元素上创建了一个双向数据绑定，将输入框的值绑定到$scope.enteredName。
5. 结论
通过这段代码，我们可以看到 AngularJS 如何通过模块化、控制器和视图指令来创建动态 Web 应用。用户可以通过输入框添加新名字到列表，并可以从列表中删除名字。这展示了 AngularJS 强大的数据绑定和 MVC 架构的应用，使得开发复杂的单页应用（SPA）变得更加简单和高效。
