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应用,同时保持代码的简洁性和可维护性。