AngularJS用法有哪些？新手必学的实用技巧有哪些？

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 内置了丰富的指令，同时也支持自定义指令。

常用内置指令

自定义指令

通过 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）打下坚实基础。