在现代 Web 应用开发中，前后端分离的架构方式已经成为了趋势，而 Restful 接口则是前端开发者获取数据的重要手段之一。在 AngularJS 中，我们可以非常简单地通过 $http 和 $resource 服务从后端 Restful 接口获取数据，本文将结合示例代码详细介绍其使用方法和技巧，并给出一些实践指导意义。
$http 服务的使用
$http 是 AngularJS 内置的一个服务，用于发送 HTTP 请求。它支持 Promise 对象，可以用链式调用的方式，让我们更方便地处理响应数据。以下是一个简单的获取数据的例子：
angular.module('app', []) .controller('MainCtrl', function($http) { var vm = this; $http.get('/api/users').then(function(response) { vm.users = response.data; }); });
在这个例子中，我们使用了 $http.get() 方法向后端发送了一个 Get 请求，并通过 then() 方法处理响应数据。其中 response.data 就是获取到的用户数据，这里我们将其赋值给了 vm.users，以备在视图中使用。
需要注意的是，$http.get() 方法返回的是一个 Promise 对象，一般情况下，我们不应该在控制器中使用它的回调函数来处理数据，而是应该通过 then() 方法将数据赋值给控制器的属性，然后在视图中使用这些属性，以实现 MVC 模式的分离。
$resource 服务的使用
$resource 是 $http 的一个封装，提供了一种更加方便的方式，以声明式、面向对象的方式发送 HTTP 请求，并且可以通过定义自定义方法、拦截器等方式进行灵活的配置和扩展。以下是一个简单的 $resource 使用示例：
-- -------------------- ---- ------- --------------------- --------------- ---------------- ------------------- - ------ ------------------------------- - ------- ----- -- - ------- - ------- ----- - --- -- ----------------------- -------------- - --- -- - ----- ----------------- -------------------------------- - ------- - ----- --- ------------------------------------------ - -------- - ------ --- ---展开代码
在这个示例中，我们首先通过 $resource.factory() 方法定义了一个 User 对象，它使用了 /api/users/:userId 路径，并以 userId 参数进行占位符形式的替换。然后，我们通过 update 方法定义了一个 PUT 请求。最后，在控制器中，我们使用了 User.get() 和 User.query() 方法，分别发送了一个带参数的 Get 请求和一个不带参数的 Get 请求，并且通过 $promise.then() 方法处理返回值。
需要注意的是，在使用 $resource 时，我们需要在模块的依赖中添加 ngResource 模块。另外，$resource.query() 方法返回的是一个数组，而 $resource.get() 方法则返回的是一个对象。
结语
AngularJS 作为一个流行的前端框架，可以非常方便地和后端 Restful 接口进行数据交互。本文结合示例代码，介绍了 $http 和 $resource 服务的使用方法，以及一些应用技巧和指导意义。在实际开发中，我们应该根据具体需求选择合适的方法，并注意 MVC 模式的分离，以便更好地组织我们的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b6d0ea306f20b3a631e5ac
