AngularJS请求数据的方法示例有哪些？如何实现？

AngularJS 作为一款经典的前端框架，其数据请求能力是构建动态应用的核心，本文将通过多个示例，详细介绍 AngularJS 中请求数据的常用方法，涵盖 $http 服务、$resource 服务以及第三方库 Restangular 的应用,帮助开发者理解不同场景下的最佳实践。

使用 $http 服务进行基础请求

$http 是 AngularJS 内置的核心服务，基于 $q 服务实现，支持 Promise 风格的异步操作，它是 AngularJS 中最基础、最灵活的数据请求方式，适用于 RESTful API 的各种请求方法。

GET 请求示例

GET 请求用于从服务器获取数据，以下是一个简单的 GET 请求示例，从 JSONPlaceholder 获取用户列表：

app.controller('UserController', function($scope, $http) {
    $http.get('https://jsonplaceholder.typicode.com/users')
        .then(function(response) {
            $scope.users = response.data; // 请求成功，数据赋值给$scope
        }, function(error) {
            console.error('请求失败:', error); // 请求失败处理
        });
});

POST 请求示例

POST 请求用于向服务器提交数据,例如创建新用户：

app.controller('CreateUserController', function($scope, $http) {
    $scope.newUser = { name: 'John Doe', email: 'john@example.com' };
    $scope.createUser = function() {
        $http.post('https://jsonplaceholder.typicode.com/users', $scope.newUser)
            .then(function(response) {
                $scope.createdUser = response.data;
                console.log('用户创建成功:', response.data);
            }, function(error) {
                console.error('创建失败:', error);
            });
    };
});

$http 配置选项

$http 支持丰富的配置选项，如设置请求头、超时时间等：

$http({
    method: 'GET',
    url: 'https://jsonplaceholder.typicode.com/users',
    params: { userId: 1 }, // URL 查询参数
    headers: { 'Content-Type': 'application/json' },
    timeout: 5000 // 超时时间 5 秒
}).then(function(response) {
    $scope.user = response.data;
});

表格：$http 常用方法对比

使用 $resource 服务处理 RESTful 资源

对于 RESTful API，AngularJS 提供了 $resource 服务，它是 $http 的高级封装，专门用于操作 RESTful 资源，支持更简洁的 API 调用。

定义资源

需要注入 ngResource 模块并定义资源：

var app = angular.module('myApp', ['ngResource']);
app.factory('User', function($resource) {
    return $resource('https://jsonplaceholder.typicode.com/users/:id', { id: '@id' }, {
        update: { method: 'PUT' } // 自定义更新方法
    });
});

使用资源进行 CRUD 操作

app.controller('UserController', function($scope, User) {
    // 获取用户列表（GET /users）
    User.query(function(users) {
        $scope.users = users;
    });
    // 获取单个用户（GET /users/:id）
    $scope.getUser = function(id) {
        User.get({ id: id }, function(user) {
            $scope.user = user;
        });
    };
    // 创建用户（POST /users）
    $scope.createUser = function() {
        var newUser = new User({ name: 'Jane Doe' });
        newUser.$save(function(response) {
            $scope.createdUser = response;
        });
    };
    // 更新用户（PUT /users/:id）
    $scope.updateUser = function() {
        var user = User.get({ id: 1 });
        user.name = 'Updated Name';
        user.$update(function(response) {
            $scope.updatedUser = response;
        });
    };
    // 删除用户（DELETE /users/:id）
    $scope.deleteUser = function(id) {
        User.delete({ id: id }, function() {
            console.log('用户删除成功');
        });
    };
});

表格：$resource 方法与 HTTP 方法映射

使用 Restangular 简化 RESTful 操作

虽然 $resource 功能强大，但 Restangular 提供了更直观的链式 API，避免了手动处理 URL 模式，特别适合复杂的 RESTful 交互。

安装与配置

首先引入 Restangular 库，并在模块中依赖 restangular：

var app = angular.module('myApp', ['restangular']);
app.config(function(RestangularProvider) {
    RestangularProvider.setBaseUrl('https://jsonplaceholder.typicode.com');
});

Restangular 使用示例

app.controller('UserController', function($scope, Restangular) {
    // 获取用户列表
    Restangular.all('users').getList().then(function(users) {
        $scope.users = users;
    });
    // 获取单个用户
    $scope.getUser = function(id) {
        Restangular.one('users', id).get().then(function(user) {
            $scope.user = user;
        });
    };
    // 创建用户
    $scope.createUser = function() {
        Restangular.all('users').post({ name: 'Alice' }).then(function(newUser) {
            $scope.createdUser = newUser;
        });
    };
    // 更新用户
    $scope.updateUser = function(id) {
        Restangular.one('users', id).get().then(function(user) {
            user.name = 'Updated Alice';
            user.put().then(function(updatedUser) {
                $scope.updatedUser = updatedUser;
            });
        });
    };
    // 删除用户
    $scope.deleteUser = function(id) {
        Restangular.one('users', id).remove().then(function() {
            console.log('用户删除成功');
        });
    };
});

AngularJS 提供了多种数据请求方式，开发者可以根据项目需求选择合适的技术。$http 服务灵活且功能全面，适合简单或复杂的请求场景；$resource 服务专注于 RESTful 资源操作，简化了 CRUD 代码；而 Restangular 则通过链式 API 进一步提升了开发效率，掌握这些方法，能够帮助开发者高效地构建数据驱动的 AngularJS 应用。