2秒钟后：
源代码：
<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.firstName = 'John'; $scope.$watch('lastName', function(newValue, oldValue){ console.log('new value is ' + newValue); }); setTimeout(function(){ $scope.lastName = 'Smith'; $scope.$apply(); }, 2000); }); </script> </head> <body ng-controller="NameCtrl"> First name:<input ng-model="firstName" type="text"/> <br> Last name:<input ng-model="lastName" type="text"/> <br> Hello {{firstName}} {{lastName}} </body> </html>
这段代码是一个简单的AngularJS示例，用于展示基本的模块定义、控制器创建、双向数据绑定、以及如何监视模型变化。下面是代码的详细解析：
- AngularJS 应用定义：
<html ng-app="nameApp">
这行代码定义了一个名为 nameApp 的 AngularJS 应用。ng-app 指令告诉 AngularJS，页面上的这个 HTML 元素及其子元素构成了 AngularJS 应用的边界。
2.模块定义：
var nameApp = angular.module('nameApp', []);
这行 JavaScript 代码定义了一个名为 nameApp 的新模块。这个模块当前没有依赖（依赖数组为空），这是AngularJS应用的起点。
3.控制器定义：
nameApp.controller('NameCtrl', function ($scope){ ... });
在 nameApp 模块中定义了一个控制器 NameCtrl。控制器是一个JavaScript函数，用于增强 AngularJS 的作用域。这里 $scope 是一个特殊的对象，AngularJS 使用它来传递数据和方法。
4.变量绑定和监视：
$scope.firstName = 'John';
控制器函数内，我们设置 $scope.firstName 初始化为 “John”。
$scope.$watch('lastName', function(newValue, oldValue){ console.log('new value is ' + newValue); });
这是 $scope 的 $watch 方法，用于监视 lastName 属性的变化。每当 lastName 的值发生变化时，都会执行回调函数，打印新的值。
5.异步更新和 $apply：
setTimeout(function(){ $scope.lastName = 'Smith'; $scope.$apply(); }, 2000);
使用 setTimeout 函数模拟异步操作，在 2000 毫秒后将 lastName 更改为 “Smith”。由于这是在 AngularJS 的作用域之外的异步操作，所以需要手动调用 $scope.$apply() 来触发脏值检查，从而更新绑定并反映在视图上。
6.HTML 视图与数据绑定：
<body ng-controller="NameCtrl"> First name:<input ng-model="firstName" type="text"/> <br> Last name:<input ng-model="lastName" type="text"/> <br> Hello {{firstName}} {{lastName}} </body>
在 HTML 部分，使用 ng-controller 指定 NameCtrl 控制器控制 body 标签内的元素。ng-model 指令用于在输入框和 $scope 对象的属性之间建立双向数据绑定。插值表达式 {{firstName}} {{lastName}} 用于在页面上显示这些变量的值。
通过上述的组件和机制，这个 AngularJS 示例展示了如何在应用中处理数据、监视数据变更，并在数据变更时更新视图。
