AngularJS入门教程，REST和定制服务如何详解？

AngularJS作为一款经典的前端JavaScript框架,其强大的服务（Service）机制和与RESTful API的交互能力是构建动态单页应用的核心基础，本文将详细讲解AngularJS中RESTful API的调用方法以及定制服务的实现方式，帮助开发者快速掌握这两项关键技术。

RESTful API与AngularJS的交互

REST（Representational State Transfer）是一种软件架构风格，广泛应用于现代Web服务中，AngularJS通过内置的$http服务与RESTful API进行通信，该服务基于Promise API，支持异步数据请求。

使用$http发起GET请求

GET请求用于从服务器获取资源,假设有一个获取用户列表的API端点/api/users，可通过以下方式调用：

app.controller('UserController', function($scope, $http) {
  $http.get('/api/users')
    .then(function(response) {
      $scope.users = response.data; // 请求成功，数据赋值给$scope
    }, function(error) {
      console.error('获取用户列表失败', error); // 请求失败处理
    });
});

POST、PUT、DELETE请求的实现

对于创建、更新和删除操作，AngularJS提供了对应的方法：

• POST（创建资源）：

  $http.post('/api/users', {name: '张三', email: 'zhangsan@example.com'})
    .then(function(response) {
      $scope.newUser = response.data;
    });

• PUT（更新资源，需指定ID）：

  $http.put('/api/users/123', {name: '李四', email: 'lisi@example.com'})
    .then(function(response) {
      $scope.updatedUser = response.data;
    });

• DELETE（删除资源）：

  $http.delete('/api/users/123')
    .then(function(response) {
      console.log('用户删除成功');
    });

请求配置与拦截器

通过$http的配置对象，可以自定义请求头、参数等：

$http({
  method: 'GET',
  url: '/api/users',
  params: {page: 1, limit: 10}, // URL查询参数
  headers: {'Authorization': 'Bearer token123'}
});

利用$httpProvider的拦截器（Interceptor），可以统一处理请求/响应拦截、错误处理等逻辑，例如添加认证token或统一错误提示。

定制服务的核心概念

服务是AngularJS中可复用的单例对象,通过依赖注入（DI）机制在整个应用中共享，AngularJS提供了多种创建服务的方式，包括factory、service、provider等。

使用Factory创建服务

factory是最常用的服务定义方式，允许返回一个包含方法和数据的对象：

app.factory('UserService', function($http) {
  var service = {};
  // 获取用户列表
  service.getUsers = function() {
    return $http.get('/api/users');
  };
  // 创建用户
  service.createUser = function(user) {
    return $http.post('/api/users', user);
  };
  return service;
});

使用时通过依赖注入调用：

app.controller('UserController', function($scope, UserService) {
  UserService.getUsers().then(function(response) {
    $scope.users = response.data;
  });
});

使用Service创建服务

service通过构造函数方式定义服务，适合更复杂的面向对象逻辑：

app.service('DataService', function($http) {
  this.getData = function(url) {
    return $http.get(url);
  };
  this.postData = function(url, data) {
    return $http.post(url, data);
  };
});

使用Provider创建可配置服务

provider是唯一可在config阶段配置的服务类型，适合需要全局配置的场景：

app.provider('ConfigurableService', function() {
  var configValue = 'default';
  this.setConfig = function(value) {
    configValue = value;
  };
  this.$get = function($http) {
    return {
      getConfig: function() {
        return configValue;
      },
      fetchData: function() {
        return $http.get('/api/data?config=' + configValue);
      }
    };
  };
});
// 在config阶段配置
app.config(function(ConfigurableServiceProvider) {
  ConfigurableServiceProvider.setConfig('customValue');
});

服务间的依赖注入

服务可以依赖其他服务,例如在UserService中注入$http和$log：

app.factory('UserService', function($http, $log) {
  var service = {};
  service.getUsers = function() {
    $log.info('正在获取用户列表...');
    return $http.get('/api/users');
  };
  return service;
});

服务与REST结合的最佳实践

在实际项目中,通常将REST API封装在服务中，控制器通过服务获取数据，实现关注点分离，以下是一个完整的用户管理模块示例：

示例代码结构：

// UserService
app.factory('UserService', function($http) {
  return {
    getUsers: function() { return $http.get('/api/users'); },
    getUserById: function(id) { return $http.get('/api/users/' + id); },
    updateUser: function(id, data) { return $http.put('/api/users/' + id, data); }
  };
});
// UserController
app.controller('UserEditController', function($scope, $routeParams, UserService) {
  UserService.getUserById($routeParams.id).then(function(response) {
    $scope.user = response.data;
  });
  $scope.saveUser = function() {
    UserService.updateUser($scope.user.id, $scope.user).then(function() {
      alert('用户信息更新成功');
    });
  };
});

AngularJS的REST交互能力通过$http服务得以实现，而定制服务则为业务逻辑提供了模块化和可复用的解决方案，开发者应根据需求选择合适的服务定义方式（factory、service或provider），并将API调用封装在服务层，以保持控制器的简洁和可维护性，掌握这两项技术，能够显著提升AngularJS应用的开发效率和质量。