在开发 Angular SPA 应用时，需要与后端交互，请求接口数据。使用 Angular 官方提供的 ngResource 模块可以简化请求接口的过程，使代码更加简洁易懂。本文将详细介绍如何在 Angular SPA 应用中使用 ngResource 请求接口，并提供示例代码。
引入 ngResource
在 Angular SPA 应用中使用 ngResource，需要先引入 ngResource 模块。可以通过以下命令安装 ngResource 模块：
npm install angular-resource
然后在应用的模块中引入 ngResource：
angular.module('myApp', ['ngResource']);创建自定义服务
我们需要创建一个自定义服务，用于封装 API 请求。自定义服务可以使用 ngResource 的 $resource 对象，该对象可以为后端 API 路径创建一个可重用的 Angular 服务。
angular.module('myApp')
.factory('User', ['$resource', function ($resource) {
return $resource('/api/users/:id', { id: '@id' }, {
update: {
method: 'PUT'
}
});
}]);在上面的代码中，$resource 方法接受两个参数：API 路径和参数。@id 表示从 $resource 函数的第二个参数中获取 id 值。
调用 API 接口
在 Angular 控制器中使用自定义服务时，只需要在依赖注入中注入该服务即可。
angular.module('myApp')
.controller('userCtrl', ['$scope', 'User', function ($scope, User) {
$scope.userList = User.query();
}]);在上面的代码中，User.query() 函数向 /api/users 发送 GET 请求，并返回一个数组。如果返回的是一个对象，则使用 User.get() 函数。如果要创建新的数据，则使用 User.save() 函数；如果要更新指定 ID 的数据，则使用 User.update() 函数；如果要删除指定 ID 的数据，则使用 User.delete() 函数。
示例代码
以下是一个完整的示例代码：
-- -------------------- ---- -------
----------------------- ---------------
---------------- ------------- -------- ----------- -
------ --------------------------- - --- ----- -- -
------- -
------- -----
-
---
---
----------------------- ---------- ------- -------- -------- ----- -
--------------- - -------------
----------------- - -------- ---- -
------------- --- -- -- -------- -- -
--------------- - -------------
---
--
----在上面的代码中，deleteUser 函数在删除用户之后重新获取用户列表。
总结
在 Angular SPA 应用中使用 ngResource，可以非常方便地请求后端 API 数据。通过封装后端 API，可以简化前端代码，使代码更加清晰易懂，提高开发效率。希望本文对大家学习和使用 ngResource 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646b730f968c7c53b0ac12d8