AngularJS 作为一款经典的前端 JAVAScript 框架，凭借其数据双向绑定、依赖注入、模块化设计等特性，曾为 Web 开发带来革命性的变化，尽管如今 newer 框架更受关注，但理解 AngularJS 的核心用法仍有助于掌握前端框架的设计思想，尤其在维护旧项目时具有重要意义，以下从数据绑定、指令系统、模块与依赖注入、路由与表单处理等方面，详细介绍 AngularJS 的常用实践方法。
数据绑定：动态视图与模型的桥梁
数据绑定是 AngularJS 最核心的功能，它实现了视图（View）与模型（Model）的自动同步，开发者无需手动操作 DOM，AngularJS 主要支持三种绑定方式：
双向绑定（）
通过指令，可将表单元素与模型数据关联，实现数据的双向实时更新。
你好，{{username}}！
当用户在输入框中输入内容时,标签中的文本会同步更新，无需编写 JavaScript 事件监听代码。
单向绑定（ 与）
一次性绑定（）
AngularJS 1.3+ 版本支持一次性绑定，通过
{{::expression}}
语法，数据只在初始化时绑定一次，后续模型变化不会影响视图，适用于静态数据场景，提升性能。
指令系统：扩展 HTML 的能力
指令（Directive）是 AngularJS 的另一大特色，它允许开发者通过自定义 HTML 标签或属性封装可复用的 DOM 行为，AngularJS 内置了丰富的指令，同时也支持自定义指令。
常用内置指令
| 指令 | 作用 | 示例 |
|---|---|---|
| 控制元素显示/隐藏（通过样式） |
|
|
| 条件性创建/销毁 DOM 元素 |
|
|
| 遍历数组或对象，生成重复 DOM |
|
|
| 动态绑定 CSS 类名 | ||
| 绑定点击事件 |
|
自定义指令
通过
module.directive()
方法可创建自定义指令，实现复杂的交互逻辑，定义一个限制输入只能为数字的指令：
app.directive('onlyNumber', function() {return {restrict: 'A', // 限制为属性使用link: function(scope, element, attrs) {element.bind('input', function() {this.value = this.value.replace(/[^0-9]/g, '');});}};});
使用时只需在 HTML 中添加
only-number
属性：。
模块与依赖注入：构建可维护的应用
模块（Module）是 AngularJS 应用程序的容器，负责组织控制器、服务、指令等代码，依赖注入（DI）则实现了组件间的高效解耦。
模块定义与使用
通过
angular.module()
创建模块，并在主 HTML 文件中通过指令初始化：
// 定义模块var app = angular.module('myApp', []);// 使用模块
依赖注入的核心角色
路由与表单处理：构建单页应用
路由（模块）
通过模块可实现单页应用（SPA）的视图切换，无需刷新整个页面，首先引入
angular-route.js
文件，然后配置路由：
app.config(function($routeProvider) {$routeProvider.when('/home', {templateUrl: 'views/home.html',controller: 'HomeController'}).when('/about', {templateUrl: 'views/about.html',controller: 'AboutController'}).otherwise({redirectTo: '/home'});});
在 HTML 中使用指令作为视图容器，路由匹配的模板会自动插入该位置。
表单验证
AngularJS 提供了强大的表单验证功能，通过绑定表单数据，并添加验证指令：
示例：
AngularJS 通过数据绑定、指令、模块化等特性，简化了前端开发流程，尤其适合构建数据驱动的 Web 应用，尽管其学习曲线相对平缓，但在大型应用中需注意性能优化（如避免过度使用）和代码组织，掌握这些核心用法，不仅能有效维护遗留项目，也能为学习现代前端框架（如 React、vue）打下坚实基础。
发表评论