AngularJS入门教程：基础概念与示例

"AngularJS学习文档概述" AngularJS是一款由Google维护的前端JavaScript框架，它极大地扩展了HTML的能力，使得开发者可以更加便捷地构建动态Web应用。AngularJS的核心特性包括数据绑定、依赖注入、指令系统以及模块化等。下面将详细阐述这些关键知识点。 1. **数据绑定**：AngularJS的核心特性之一就是双向数据绑定，它将模型（Model）和视图（View）紧密关联起来。在示例中，`ng-model`指令将输入框的值与名为`name`的模型属性绑定，任何一方的改变都会实时反映到另一方。`{{}}`插值表达式和`ng-bind`都是用于在视图中展示模型数据的方式，但`ng-bind`在页面加载时不会立即显示表达式，而是等待模型数据准备好后再渲染。 2. **指令**：AngularJS通过自定义的HTML属性（以`ng-`开头）来扩展HTML的功能，这些被称为指令。例如，`ng-app`用于标识一个AngularJS应用的启动点，`ng-model`用于数据绑定，`ng-bind`用于将模型数据绑定到HTML元素的`innerHTML`。此外，`ng-init`用于初始化应用程序的变量或对象。 3. **表达式**：AngularJS表达式是一种简化版的JavaScript，它们可以在HTML中直接使用，用于计算和展示数据。表达式可以包含变量、操作符，但不支持完整的JavaScript语法，如条件语句、循环和异常处理。表达式支持过滤器，可以对数据进行格式化和转换。 4. **初始化**：`ng-init`指令允许我们在HTML中初始化应用程序的变量。示例中，`ng-init`设置了`firstName`和`lastName`的初始值，或者创建了一个包含多个属性的对象`person`。这使得在页面加载时就能设定初始状态。 5. **模块化**：虽然文档中没有具体提及，但AngularJS提倡使用模块（Module）来组织应用的各个部分。模块可以包含控制器、服务、指令等组件，并且可以依赖其他模块，提供良好的代码结构和复用性。 6. **控制器**：在AngularJS中，控制器是一个JavaScript函数，它扩展了视图能访问的模型数据。控制器通过`ng-controller`指令附加到DOM元素上，可以用来添加或修改模型中的属性，与视图进行交互。 7. **服务**：AngularJS的服务提供了一种共享代码和数据的方式，它们可以在应用的各个部分之间通信。例如，`$http`服务用于发送HTTP请求，`$scope`服务是连接控制器和视图的桥梁。 8. **过滤器**：过滤器用于在视图中对数据进行转换，如格式化日期、货币或进行搜索过滤。在表达式中通过管道符号（`|`）来使用过滤器，如`{{ expression | filter1 | filter2 }}`。 9. **指令的其他类型**：除了基本的`ng-app`, `ng-model`, 和 `ng-bind`，AngularJS还提供了许多其他指令，如`ng-repeat`用于列表迭代，`ng-if`和`ng-show`控制元素的显示，`ng-click`响应用户点击事件等。 AngularJS的学习涉及众多概念和技术，理解并熟练运用这些知识点是构建高效、可维护的前端应用的关键。通过实践和不断探索，开发者能够充分利用AngularJS的优势，打造功能丰富的Web应用。