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的配置对象，可以自定义请求头、参数等：

利用$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应用的开发效率和质量。