AngularJS 作为一款经典的前端 JavaScript 框架，凭借其数据双向绑定、依赖注入、模块化设计等特性，曾为 Web 开发带来革命性的变化，尽管如今 newer 框架更受关注，但理解 AngularJS 的核心用法仍有助于掌握前端框架的设计思想，尤其在维护旧项目时具有重要意义，以下从数据绑定、指令系统、模块与依赖注入、路由与表单处理等方面，详细介绍 AngularJS 的常用实践方法。
数据绑定：动态视图与模型的桥梁
数据绑定是 AngularJS 最核心的功能，它实现了视图（View）与模型（Model）的自动同步，开发者无需手动操作 DOM，AngularJS 主要支持三种绑定方式：
双向绑定（ng-model）
通过 ng-model 指令，可将表单元素与模型数据关联，实现数据的双向实时更新。
<input type="text" ng-model="username">
<p>你好，{{username}}！</p> 当用户在输入框中输入内容时,<p> 标签中的文本会同步更新，无需编写 JavaScript 事件监听代码。
单向绑定（ 与 ng-bind）
- 插值表达式 ：用于在视图中直接显示模型数据，适合静态或动态更新的文本。
ng-bind指令：功能与 类似，但能避免页面加载时出现未渲染的模板代码（如{{username}}闪烁），适合大段文本绑定。
一次性绑定（）
AngularJS 1.3+ 版本支持一次性绑定，通过 {{::expression}} 语法，数据只在初始化时绑定一次，后续模型变化不会影响视图，适用于静态数据场景，提升性能。
指令系统：扩展 HTML 的能力
指令（Directive）是 AngularJS 的另一大特色，它允许开发者通过自定义 HTML 标签或属性封装可复用的 DOM 行为，AngularJS 内置了丰富的指令，同时也支持自定义指令。
常用内置指令
| 指令 | 作用 | 示例 |
|---|---|---|
ng-show/ng-hide | 控制元素显示/隐藏（通过 display 样式） | <div ng-show="isVisible">内容</div> |
ng-if | 条件性创建/销毁 DOM 元素 | <div ng-if="user.isAdmin">管理员面板</div> |
ng-repeat | 遍历数组或对象，生成重复 DOM | <li ng-repeat="item in items">{{item.name}}</li> |
ng-class | 动态绑定 CSS 类名 | <div ng-class="{'active': isActive}"></div> |
ng-click | 绑定点击事件 | <button ng-click="saveData()">保存</button> |
自定义指令
通过 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 属性：<input only-number>。
模块与依赖注入：构建可维护的应用
模块（Module）是 AngularJS 应用程序的容器，负责组织控制器、服务、指令等代码，依赖注入（DI）则实现了组件间的高效解耦。
模块定义与使用
通过 angular.module() 创建模块，并在主 HTML 文件中通过 ng-app 指令初始化：
// 定义模块
var app = angular.module('myApp', []);
// 使用模块
<html ng-app="myApp"> 依赖注入的核心角色
- 控制器（Controller）：负责初始化模型数据，通过
$scope将数据传递给视图。app.controller('MainController', function($scope) { $scope.message = 'Hello AngularJS!'; }); - 服务（Service）：用于封装可复用的业务逻辑（如 HTTP 请求、数据缓存），通过
factory、service或provider方法创建。app.factory('UserService', function($http) { return { getUser: function(id) { return $http.get('/api/user/' + id); } }; }); - 过滤器（Filter）：用于格式化视图中的数据，可通过 符号调用，内置过滤器如
currency（货币）、date（日期）、uppercase（大写），也支持自定义过滤器。
路由与表单处理：构建单页应用
路由（ngRoute 模块）
通过 ngRoute 模块可实现单页应用（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 中使用 <ng-view> 指令作为视图容器，路由匹配的模板会自动插入该位置。
表单验证
AngularJS 提供了强大的表单验证功能，通过 ng-model 绑定表单数据，并添加验证指令：
required：必填项ng-minlength/ng-maxlength：最小/最大长度pattern：正则表达式验证type="email"/type="number"：邮箱/数字类型验证
示例：
<form name="myForm" ng-submit="submitForm()">
<input type="email" name="email" ng-model="user.email" required>
<span ng-show="myForm.email.$error.required">邮箱不能为空</span>
<span ng-show="myForm.email.$error.email">邮箱格式不正确</span>
<button type="submit" ng-disabled="myForm.$invalid">提交</button>
</form> AngularJS 通过数据绑定、指令、模块化等特性，简化了前端开发流程，尤其适合构建数据驱动的 Web 应用，尽管其学习曲线相对平缓，但在大型应用中需注意性能优化（如避免过度使用 watch）和代码组织，掌握这些核心用法，不仅能有效维护遗留项目，也能为学习现代前端框架（如 React、Vue）打下坚实基础。
图片来源于AI模型，如侵权请联系管理员。作者：酷小编，如若转载，请注明出处：https://www.kufanyun.com/ask/26073.html