AngularJS写法有哪些常见陷阱及最佳实践？

AngularJS 作为一款经典的前端 JavaScript 框架，其核心在于通过数据绑定和依赖注入简化动态 Web 应用的开发，以下从核心概念、模块化设计、控制器编写、视图交互及最佳实践等方面，系统介绍 AngularJS 的标准写法。

模块与依赖：应用的基础架构

AngularJS 应用以模块为基本单位，通过 angular.module() 方法创建和配置模块，模块不仅作为容器，还负责管理依赖关系，确保组件间的松耦合。

// 创建模块，并注入核心依赖（如 ngRoute 用于路由）
var app = angular.module('myApp', ['ngRoute']);  

模块设计需遵循单一职责原则，例如将路由、服务、指令等功能拆分为独立模块，再通过主模块整合。

// 定义核心模块  
var core = angular.module('core', []);  
// 定义用户模块  
var user = angular.module('user', ['core']);  
// 主模块依赖子模块  
var app = angular.module('myApp', ['core', 'user']);  

控制器：数据与逻辑的中枢

控制器负责初始化视图模型（$scope），处理用户交互逻辑，编写控制器时需注意以下几点：

1. 依赖注入：通过 $scope 关联视图与控制器，$http 用于数据请求，$location 处理路由等。
2. 避免直接操作 DOM：保持数据驱动视图，而非手动操作 DOM。
3. 轻量化设计：控制器仅处理业务逻辑，复杂逻辑应抽离至服务。

示例：用户列表控制器

app.controller('UserListController', ['$scope', '$http', function($scope, $http) {  
    $scope.users = [];  
    $scope.loading = true;  
    // 获取用户数据  
    $http.get('/api/users').then(function(response) {  
        $scope.users = response.data;  
        $scope.loading = false;  
    }).catch(function(error) {  
        console.error('获取用户列表失败:', error);  
        $scope.loading = false;  
    });  
    // 删除用户  
    $scope.deleteUser = function(userId) {  
        $http.delete('/api/users/' + userId).then(function() {  
            $scope.users = $scope.users.filter(function(user) {  
                return user.id !== userId;  
            });  
        });  
    };  
}]);  

视图：模板与数据绑定

AngularJS 视图以 HTML 为模板，通过指令实现动态数据绑定，核心指令包括：

示例：用户列表视图

<div ng-controller="UserListController">  
    <h2>用户列表</h2>  
    <div ng-show="loading">加载中...</div>  
    <table ng-show="!loading">  
        <thead>  
            <tr>  
                <th>ID</th>  
                <th>姓名</th>  
                <th>操作</th>  
            </tr>  
        </thead>  
        <tbody>  
            <tr ng-repeat="user in users">  
                <td>{{ user.id }}</td>  
                <td>{{ user.name }}</td>  
                <td>  
                    <button ng-click="deleteUser(user.id)">删除</button>  
                </td>  
            </tr>  
        </tbody>  
    </table>  
</div>  

服务：可复用的业务逻辑

服务用于封装可复用的功能（如数据请求、工具函数），通过依赖注入机制在控制器、指令等组件间共享，AngularJS 内置 $http、$timeout 等服务，也可自定义服务。

示例：自定义用户服务

app.service('UserService', ['$http', function($http) {  
    this.getUsers = function() {  
        return $http.get('/api/users');  
    };  
    this.createUser = function(userData) {  
        return $http.post('/api/users', userData);  
    };  
}]);  
// 在控制器中使用  
app.controller('UserController', ['$scope', 'UserService', function($scope, UserService) {  
    UserService.getUsers().then(function(response) {  
        $scope.users = response.data;  
    });  
}]);  

路由与多页面视图

通过 ngRoute 模块实现前端路由，支持多视图切换，配置路由需定义 $routeProvider，指定路径、模板及控制器。

app.config(['$routeProvider', function($routeProvider) {  
    $routeProvider  
        .when('/users', {  
            templateUrl: 'views/users.html',  
            controller: 'UserListController'  
        })  
        .when('/users/:id', {  
            templateUrl: 'views/user-detail.html',  
            controller: 'UserDetailController'  
        })  
        .otherwise({  
            redirectTo: '/users'  
        });  
}]);  

最佳实践与注意事项

1. 命名规范：控制器、服务等组件采用驼峰命名，并添加统一前缀（如 UserController）。
2. 避免全局变量：始终通过模块封装功能，避免污染全局作用域。
3. 数据绑定优化：对于大数据列表，使用 track by 提升渲染性能（如 ng-repeat="user in users track by user.id"）。
4. 生命周期管理：在控制器中通过 $onDestroy 清理定时器、事件监听等资源，避免内存泄漏。

通过以上模块化、数据驱动的写法，AngularJS 能够构建结构清晰、易于维护的单页应用，尽管现代前端框架更趋流行，但其核心思想（如依赖注入、数据绑定）仍对前端开发具有深远影响。