从0到1精通Restangular：AngularJS RESTful服务实战指南-优快云博客

从0到1精通Restangular：AngularJS RESTful服务实战指南

【免费下载链接】restangular AngularJS service to handle Rest API Restful Resources properly and easily 项目地址: https://gitcode.com/gh_mirrors/re/restangular

你还在为AngularJS项目中的RESTful API调用编写重复代码吗？还在为嵌套资源处理和URL管理而头疼吗？本文将带你彻底掌握Restangular——这款专为AngularJS设计的RESTful服务神器，让API交互从此变得简单高效。读完本文，你将能够：

快速配置和使用Restangular处理常见API操作
掌握高级特性如拦截器、自定义方法和嵌套资源
解决实际开发中的常见痛点问题
了解Restangular与$resource的核心差异

Restangular简介：为何选择它？

Restangular是一个AngularJS服务，旨在简化常见的GET、POST、DELETE和UPDATE请求，用最少的客户端代码实现强大的API交互。它非常适合任何使用RESTful API获取数据的Web应用。

Restangular vs $resource

特性	Restangular	$resource
承诺支持	✅ 全面支持promises	❌ 有限支持
路由解析	✅ 完美支持$routeProvider.resolve	❌ 不直接支持
URL处理	✅ 自动处理，无需手动编写	❌ 需要手动定义URL模板
嵌套资源	✅ 原生支持	❌ 需要额外配置
自定义方法	✅ 灵活扩展	❌ 有限扩展能力
ETag支持	✅ 开箱即用	❌ 需要手动实现
错误处理	✅ 统一拦截器	❌ 分散处理

核心优势

Restangular解决了$resource的诸多痛点：

无需记忆URL：不需要编写任何URL模板，只需指定资源名称
嵌套资源处理：轻松处理复杂的嵌套RESTful资源
承诺驱动：使用AngularJS的$q promises，便于异步流程控制
拦截器系统：请求/响应拦截器，轻松处理认证、错误统一处理等
自我链接元素：支持从服务器接收包含自我链接的元素

快速上手：5分钟入门

安装与引入

使用npm或bower安装Restangular：

npm install restangular
# 或
bower install restangular

在HTML中引入（使用国内CDN）：

<script src="https://cdn.bootcdn.net/ajax/libs/restangular/1.5.1/restangular.min.js"></script>

基本配置

只需两步即可开始使用Restangular的所有基本功能：

// 添加Restangular作为应用依赖
angular.module('your-app', ['restangular']);

// 注入Restangular到控制器
angular.module('your-app').controller('MainCtrl', function($scope, Restangular) {
  // 控制器逻辑...
});

注意：添加依赖时使用小写'restangular'，而注入到控制器时使用大写'Restangular'

核心操作：RESTful API实战

创建Restangular对象

有三种方式可以创建主要的Restangular对象：

// 1. 指定资源路径
var baseAccounts = Restangular.all('accounts');

// 2. 指定资源路径和ID
var account = Restangular.one('accounts', 1234);

// 3. 指定资源路径和多个ID
var accounts = Restangular.several('accounts', 1234, 5678, 9012);

基本CRUD操作

Restangular提供了直观的API来处理常见的CRUD操作：

// 获取资源列表 (GET /accounts)
baseAccounts.getList().then(function(accounts) {
  $scope.accounts = accounts;
});

// 创建新资源 (POST /accounts)
var newAccount = {name: "新账户"};
baseAccounts.post(newAccount).then(function(createdAccount) {
  console.log("创建成功:", createdAccount);
});

// 获取单个资源 (GET /accounts/1234)
account.get().then(function(account) {
  $scope.account = account;
  
  // 更新资源 (PUT /accounts/1234)
  account.name = "更新后的名称";
  account.put();
  
  // 删除资源 (DELETE /accounts/1234)
  account.remove().then(function() {
    console.log("删除成功");
  });
});

简化的数据绑定

Restangular对象可以直接绑定到视图，自动处理加载状态：

// 直接绑定到作用域，视图中可使用{{accounts.$resolved}}判断加载状态
$scope.accounts = Restangular.all('accounts').getList().$object;

高级特性：提升开发效率

配置Restangular

通过配置可以定制Restangular的各种行为：

angular.module('your-app').config(function(RestangularProvider) {
  // 设置基础URL
  RestangularProvider.setBaseUrl('/api/v1');
  
  // 设置默认请求头
  RestangularProvider.setDefaultHeaders({'Authorization': 'Bearer ' + token});
  
  // 设置请求参数
  RestangularProvider.setDefaultRequestParams({'api_key': 'your_api_key'});
  
  // 设置ID字段（如MongoDB使用_id）
  RestangularProvider.setRestangularFields({
    id: '_id'
  });
});

拦截器的强大功能

Restangular的拦截器系统可以处理各种全局需求：

响应拦截器：处理包装的响应

许多API返回包装的数据，如{data: [...], meta: {...}}，可以使用响应拦截器提取数据：

RestangularProvider.addResponseInterceptor(function(data, operation, what, url, response, deferred) {
  var extractedData;
  
  // 根据操作类型提取数据
  if (operation === "getList") {
    extractedData = data.data;
    // 保存元数据
    extractedData.meta = data.meta;
  } else {
    extractedData = data.data;
  }
  
  return extractedData;
});

请求拦截器：添加认证令牌

RestangularProvider.addFullRequestInterceptor(function(element, operation, path, url, headers, params, httpConfig) {
  // 添加认证令牌
  headers.Authorization = 'Bearer ' + localStorage.getItem('token');
  return {
    element: element,
    headers: headers,
    params: params,
    httpConfig: httpConfig
  };
});

错误拦截器：统一错误处理

RestangularProvider.addErrorInterceptor(function(response, deferred, responseHandler) {
  if (response.status === 401) {
    // 未授权，重定向到登录页
    $location.path('/login');
    return false; // 阻止 promise 继续执行
  }
  
  // 其他错误交给默认处理
  return true;
});

嵌套资源处理

Restangular简化了嵌套资源的操作：

// 获取账户123的建筑列表 (GET /accounts/123/buildings)
Restangular.one('accounts', 123).getList('buildings').then(function(buildings) {
  $scope.buildings = buildings;
  
  // 获取第一个建筑的房间 (GET /accounts/123/buildings/456/rooms)
  buildings[0].getList('rooms').then(function(rooms) {
    $scope.rooms = rooms;
  });
});

自定义方法

为资源添加自定义方法，扩展Restangular功能：

// 为账户资源添加自定义方法
Restangular.extendModel('accounts', function(model) {
  model.getFullName = function() {
    return this.firstName + ' ' + this.lastName;
  };
  
  model.deactivate = function() {
    return this.customPUT({status: 'inactive'}, 'deactivate');
  };
  
  return model;
});

// 使用自定义方法
$scope.account.getFullName(); // 调用实例方法
$scope.account.deactivate(); // 调用自定义API方法

实战技巧：解决常见问题

处理MongoDB的_id字段

MongoDB使用_id作为主键，而Restangular默认使用id，可以通过配置修改：

RestangularProvider.setRestangularFields({
  id: '_id'
});

处理包装的API响应

许多API返回格式如{data: [...], meta: {...}}，使用响应拦截器统一处理：

RestangularProvider.addResponseInterceptor(function(data, operation, what, url, response, deferred) {
  var extractedData;
  
  // 处理列表响应
  if (operation === "getList") {
    extractedData = data.data;
    extractedData.meta = data.meta; // 保存元数据
  } else {
    // 处理单个对象响应
    extractedData = data.data;
  }
  
  return extractedData;
});

取消请求

使用$http的取消功能取消Restangular请求：

var canceler = $q.defer();

Restangular.one('accounts', 123).withHttpConfig({timeout: canceler.promise}).get()
  .then(function(account) {
    $scope.account = account;
  });

// 需要取消时调用
canceler.resolve();

创建独立配置的Restangular实例

有时需要不同配置的Restangular实例，可以使用withConfig：

var customRestangular = Restangular.withConfig(function(RestangularConfigurer) {
  RestangularConfigurer.setBaseUrl('/custom-api');
  RestangularConfigurer.setDefaultHeaders({'X-Custom-Header': 'value'});
});

// 使用自定义实例
customRestangular.all('custom-resource').getList();

生产环境最佳实践

模块化组织

将Restangular相关代码组织为独立模块：

// restangular-config.js
angular.module('app.restangular', ['restangular'])
  .config(function(RestangularProvider) {
    // 配置...
  })
  .factory('AccountService', function(Restangular) {
    return {
      getAccounts: function() {
        return Restangular.all('accounts').getList();
      },
      // 其他账户相关方法...
    };
  });

性能优化

缓存策略：配置默认HTTP缓存

RestangularProvider.setDefaultHttpFields({cache: true});

批量请求：减少网络往返

// 获取多个资源
Restangular.several('accounts', 1, 2, 3).getList()
  .then(function(accounts) {
    // 处理账户列表
  });

只获取需要的字段：减少数据传输

// 请求时指定字段
Restangular.all('accounts').getList({fields: 'id,name,email'});

错误处理策略

实现全面的错误处理机制：

// 全局错误处理
angular.module('app.restangular').run(function(Restangular, $rootScope) {
  Restangular.addErrorInterceptor(function(response, deferred, responseHandler) {
    var error = {
      status: response.status,
      message: response.data.message || '发生未知错误',
      url: response.config.url
    };
    
    // 广播错误事件
    $rootScope.$broadcast('api:error', error);
    
    // 特殊状态码处理
    if (response.status === 403) {
      // 处理权限错误
    } else if (response.status === 404) {
      // 处理资源不存在
    }
    
    return true; // 继续执行 promise 的错误处理
  });
});

总结与展望

Restangular为AngularJS应用提供了优雅而强大的RESTful API交互方案，通过简化常见操作、提供灵活配置和强大的扩展能力，显著提高了开发效率。从基本的CRUD操作到复杂的嵌套资源处理，从请求/响应拦截到自定义方法，Restangular都能胜任。

尽管本文覆盖了Restangular的主要功能，但仍有更多高级特性等待你去探索，如：

自定义URL创建器
高级缓存策略
与其他AngularJS服务的集成
测试策略

建议深入阅读官方文档和源码，进一步发掘Restangular的潜力。

注意：本文介绍的版本仅支持Angular 1。对于Angular 2+项目，请查看ngx-restangular，这是一个由不同维护者维护的独立项目。

希望本文能帮助你在AngularJS项目中更好地使用Restangular，简化API交互，提升开发效率。如有任何问题或建议，欢迎在评论区留言讨论！

从0到1精通Restangular：AngularJS RESTful服务实战指南