AngularJS 三大核心概念：表达式、指令与过滤器

"这篇文档主要介绍了AngularJS中的三个核心概念：表达式、指令和过滤器。" 在AngularJS中，**表达式**是用于在视图中展示和操作数据的简单JavaScript片段。它们通常以双大括号`{{ }}`包裹，可以从作用域对象中读取并显示属性数据。然而，AngularJS表达式不支持完整的JavaScript控制结构，如`if`、`for`或`while`循环，但允许使用三目运算符进行条件判断。例如，`{{ user.isAdmin ? '管理员' : '普通用户' }}`。 **指令**是AngularJS的一个强大特性，它们扩展了HTML，允许自定义标签属性或创建全新的标签。一些常见的指令包括： - `ng-app`: 定义AngularJS应用的范围，标记页面的某个部分由Angular管理。 - `ng-model`: 实现双向数据绑定，将控件与作用域对象的属性关联，例如`<input ng-model="username">`。 - `ng-init`: 用于初始化数据，可以在元素上设置初始值。 - `ng-click`: 在元素被点击时调用作用域内的方法，可以传递`$event`参数来访问事件对象。 - `ng-controller`: 指定控制器构造函数，创建新的作用域。 - `ng-bind`: 避免使用`{{ }}`导致的短暂闪现，直接将数据绑定到元素内容。 - `ng-repeat`: 遍历数组并为每个元素创建新的作用域，提供了 `$index`, `$first`, `$last`, `$middle`, `$odd`, 和 `$even` 这些特殊变量。 - `ng-show` 和 `ng-hide`: 基于布尔值决定元素是否显示。 - `ng-class` 和 `ng-style`: 动态地根据表达式的值添加或删除CSS类或应用内联样式。 **过滤器**则用于格式化或过滤数据，它们不会改变原始数据。你可以单独使用过滤器来格式化数据，或者串联多个过滤器来实现更复杂的处理。例如： - `currency`: 将数字格式化为货币形式。 - `number`: 格式化数字为特定精度的文本。 - `date`: 将日期对象转换为指定格式的字符串。 - `json`: 将JavaScript对象转成JSON格式的字符串。 - `lowercase` 和 `uppercase`: 将字符串转换为全小写或全大写。 - `limitTo`: 限制数组或字符串的长度，如`limitTo:3`截取前三个元素，`limitTo:-3`截取后三个元素。 - `orderBy`: 根据提供的属性对数组进行排序，可以实现升序或降序排列。 通过这些基本概念，开发者可以构建动态、数据驱动的Web应用程序，实现丰富的交互性和数据展示效果。在实际开发中，AngularJS的表达式、指令和过滤器是构建功能强大的前端应用不可或缺的工具。