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

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

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

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

GET 请求示例

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

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 应用。