Angular.js 应用的双向绑定
效果：
源代码：
<html ng-app>
<head>
<meta charset="utf-8">
<title>Angular.js Example</title>
<script src="angular/angular.js"></script>
<script>
function NameCtrl($scope){
$scope.firstName = 'John';
$scope.lastName = 'Smith';
}
</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 创建一个简单的交互式用户界面。在这个例子中，我们定义了一个简单的控制器 NameCtrl，它管理一个表单，表单中包含用户的 firstName 和 lastName。随着用户输入的变化，页面上相应的部分也会实时更新以反映这些变化。下面将详细分析这段代码的每个部分：
HTML 结构
<html ng-app>
<head>
<meta charset="utf-8">
<title>Angular.js Example</title>
<script src="angular/angular.js"></script>
这段代码首先定义了 HTML 文档的基本结构，包括 head 和 body。<html ng-app> 表示整个 HTML 页面是一个 AngularJS 应用的根元素。ng-app 指令是用来标记 AngularJS 应用的启动点，它告诉 AngularJS 从这里开始编译和执行代码。
在 head 部分，除了设置字符集和页面标题外，最重要的是通过 <script src="angular/angular.js"></script> 引入了 AngularJS 的库文件。这是使用 AngularJS 开发的前提，因为所有的功能都需要通过这个库来实现。
JavaScript 控制器
<script>
function NameCtrl($scope){
$scope.firstName = 'John';
$scope.lastName = 'Smith';
}
</script>
这段 <script> 定义了一个名为 NameCtrl 的控制器。在 AngularJS 中，控制器是用来定义应用的业务逻辑的地方。这里 NameCtrl 控制器接受一个 $scope 对象作为参数，$scope 是一个特殊的对象，用于双向绑定数据和视图。控制器内部设置了 $scope.firstName 和 $scope.lastName，初始化为 John 和 Smith。这两个属性存储的值将用于数据绑定，展示在视图中，并且能够响应视图上的数据变化。
视图和数据绑定
<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>
在 body 标签中，我们使用 ng-controller="NameCtrl" 将此部分的视图与 NameCtrl 控制器关联起来。这意味着在这部分的 HTML 中可以使用控制器定义的 $scope 上的属性和方法。
<input ng-model="firstName" type="text" /> 和 <input ng-model="lastName" type="text" /> 使用 ng-model 指令绑定到 $scope 上的 firstName 和 lastName 属性。这种绑定是双向的：视图（input 输入框）上的任何变化都会实时更新到 $scope 的属性上，反之亦然。
Hello{{firstName}} {{lastName}}`` 则是 AngularJS 的插值表达式。这里，它将 firstName 和 lastName 的当前值插入到 HTML 中，实现了数据的实时显示。当 input 中的值发生改变时，由于 $scope 属性的双向绑定，插值表达式中的内容也会立即更新。
总结
这个示例展示了 AngularJS 的一些核心特性：模块化控制器、数据绑定、指令以及表达式。通过这些特性，开发者可以快速构建动态交互的网页应用。AngularJS 通过其数据绑定和依赖注入的特点，使得开发复杂的单页应用（SPA）变得更加高效和简单。在实际应用中，这种模式可以扩
展到更复杂的业务逻辑和更多的数据处理，展示出 AngularJS 强大的开发能力。
- 点赞
- 收藏
- 关注作者
评论（0）