AngularJS是一种基于JavaScript的轻量级前端模型-视图-控制器(MVVM)框架，它旨在弥补HTML在构建复杂Web应用程序时的局限性。该框架通过自定义指令(directives)扩展HTML的功能，使浏览器能够理解和响应新的语法结构，从而简化了开发过程。
在AngularJS应用中，HTML结构被组织得更为清晰，通过特定的指令来实现特定的功能。例如：
1. `<html ng-app="persons">`: 这个指令告诉AngularJS应用，该HTML文档与名为"persons"的模块关联。`ng-app`属性绑定的是应用模块名，它是整个应用的入口点，负责初始化和管理其他组件。
2. `<body ng-controller="personsList">`: `ng-controller`指令用于指定一个控制器，这里选择了`personsList`控制器，使其作用于整个`<body>`元素。这意味着任何在这个`body`内的元素都将由`personsList`控制器进行处理，如数据绑定等。
AngularJS的核心是MVC模式的变形，Controller在Angular中被称为Presenter，它的职责更偏向于业务逻辑的处理；而ViewModel则替代了Controller，它实现了双向数据绑定，即数据变化会自动反映到视图上，反之亦然。
常见的View指令包括：
- `ng-include`: 用于动态加载并编译外部HTML片段，将其嵌入到当前页面。
- `ng-switch`: 类似Java中的switch语句，根据条件展示不同的内容。
- `ng-repeat`: 用于遍历数组或对象，重复渲染对应的模板。
- `ng-if`: 动态地根据条件显示或隐藏元素，类似于Java的if条件判断。
- `ng-href` 和 `ng-src`: 分别用于动态生成URL和加载图片，提供了动态链接和图片加载的能力。
- `ng-disabled` 和 `ng-checked`: 控制元素的可用性和选中状态。
- `ng-readonly` 和 `ng-selected`: 可以动态设置表单元素的只读状态和下拉框的默认值。
- `ng-class` 和 `ng-style`: 分别用于动态添加或修改元素的CSS类和样式。
此外，AngularJS还提供了一系列过滤器(filter)，用于转换数据呈现形式。例如：
- `currency`: 将数值格式化为货币样式。
- `date`: 格式化日期，如将`{{today|date: 'shortDate'}}`展示为指定的日期格式。
- `filter`: 在数组中执行筛选操作，返回满足条件的子集。
这些指令和过滤器展示了AngularJS如何增强HTML的表达能力，使得开发者能够更加高效地构建复杂的Web应用，同时保持代码的简洁性和可维护性。
我的内容管理
展开
