Angular.js 应用里 ng-controller 的用法
这段代码是一个简单的 Angular.js 示例，展示了如何通过 Angular 框架来创建一个动态交互的网页。下面我们详细分析每个部分的功能和语法。
HTML 结构和 Angular 应用初始化
<html ng-app>
这行代码通过 ng-app 指令标记了整个 HTML 文档为 Angular 应用的根元素。ng-app 指令用于自动启动应用，不需要编写任何 JavaScript 代码来手动启动。在这个例子中，ng-app 没有指定任何值，这意味着它将会自动关联到页面中包含的所有 Angular 功能。
引入 Angular.js 库
<script src="angular/angular.js"></script>
这行 HTML 代码引入了 Angular.js 库。这是使用 Angular 开发任何应用的基础，确保所有的 Angular 功能（比如数据绑定、依赖注入等）都可以正常工作。
控制器定义和作用域配置
<script>
function NameCtrl($scope){
$scope.firstName = 'John';
$scope.lastName = 'Smith';
}
</script>
这部分 JavaScript 代码定义了一个名为 NameCtrl 的控制器。在 Angular 中，控制器负责初始化数据和定义函数，以便在 HTML 视图中使用。这里，控制器通过 $scope 对象向视图暴露了两个属性：firstName 和 lastName。 $scope 是一个特殊的对象，它作为控制器与 HTML 视图之间的桥梁，使得视图可以访问到控制器中定义的属性和方法。
视图和数据绑定
<body ng-controller="NameCtrl">
ng-controller 指令告诉 Angular，body 标签内的所有内容都应该在 NameCtrl 控制器的上下文中解析。这意味着任何在 body 标签内使用的 $scope 对象的属性都可以直接访问。
First name:<input ng-model="firstName" type="text"/>
这里的 ng-model 指令绑定了输入框的值到 $scope.firstName。这是双向数据绑定的一个实例：用户在输入框中的任何更改都会即时反映到 $scope.firstName 上，反之亦然。
Last name:<input ng-model="lastName" type="text"/>
同上，这个输入框通过 ng-model 绑定到了 $scope.lastName 上。用户对这个输入框的任何更改都会更新 $scope.lastName 的值。
Hello `{{firstName}} {{lastName}}`
这里使用了 {{ }} 模板表达式来显示当前的 firstName 和 lastName。无论这两个值如何改变，显示的内容都会即时更新。这是 Angular 的数据绑定功能的直观展示。
总结
这个 Angular 示例展示了基本的 MVC（模型-视图-控制器）概念：模型由 $scope 上的数据表示，视图是 HTML 代码，控制器通过 JavaScript 函数 NameCtrl 来定义。通过这种方式，Angular 能够将数据逻辑、展示逻辑和数据模型清晰地分离开来，使得开发更加模块化和易于管理。
通过以上分析，我们可以看到 Angular 如何通过简洁的声明式代码将复杂的功能如数据绑定和依赖注入简化，进而帮助开发者构建强大、动态的 Web 应用。
- 点赞
- 收藏
- 关注作者
评论（0）