Angular JS: 与服务器的通信基础

分享于 

12分钟阅读

Web开发

  繁體

介绍

Angular 已经成为一个非常流行的框架,它允许扩展HTML创建模板并在视图和模型之间启用双向绑定。 除了模板之外的实际应用程序依赖于执行核心业务逻辑的后端服务器。 Angular 为与服务器提供了丰富的支持,它不仅提供了低级机制来与服务器通信,而且还提供了用于与rest式服务通信的封装。

在本文中,我们将重点讨论如何使用 Angular JS与服务器通信。

背景

AJAX是单页面应用程序的核心。 它支持与后端服务器的通信而无需刷新页面。 这个单一特性改变了web应用程序开发的方式。 一个典型的web应用程序现在主要关注获取数据和布局( HTML )。 这与 asp/jsp应用程序开发的方式不同,在服务器上合并数据和布局以生成 HTML。 由于AngularJS应用程序也是单页应用程序,它提供了丰富的AJAX通信支持。

让我们深入了解 Angular 为服务器端通信提供的支持的细节。

$http 通信

在 Angular 中,与服务器通信的基本构建 block 是 $http 服务。 $http 服务是一个核心 Angular 服务,它通过浏览器对象或者通过tmodel的XMLHttpRequest 与远程HTTP服务器进行通信。

这里服务提供基本功能,例如:

  • GET
  • POST
  • HEAD
  • DELETE
  • PUT
  • JSONP

Angular API采用基于 Promise 接口的服务器端通信方法。 这确保所有相关的服务器调用都是非阻塞/异步调用,这意味着服务器的响应在将来的某个时间返回。 Promise 接口确保响应将在到达时相应地处理。 有两个方法名,successerror 用于处理来自服务器的响应。

$http.get("empMgr", {params: {op: 'get'}})
. success(function(data, status, headers, config) {
 $scope.employee = data; // Sets the employee object in $scope })
. error(function(data, status, headers, config) {
 alert("failure");
 });
 };

在上述示例中,将激发一个 AJAX GET 请求,以查找带有id的employee的详细信息。 这里调用不等待来自服务器的响应。 当将来收到来自服务器的响应时,根据服务器的响应,调用适当的函数 success 或者 error

$http.post

如果我们需要使用 POST 方法向服务器提交数据,我们可以使用 $http.post API。 下面是将数据发布到服务器的示例。

var dataToPost = {firstName: "Allen", lastName: "John"}; /* PostData*/var queryParams = {params: {op: 'saveEmployee'}};/* Query Parameters*/$http.post("empMgr"/* URL */, dataToPost, queryParams)
. success(function(serverResponse, status, headers, config) {
 // Updating the $scope postresponse variable to update theview $scope.postresponse = serverResponse.data.firstName + "" + serverResponse.data.lastName;
 }).error(function(serverResponse, status, headers, config) {
 alert("failure");
 }
 );

这个 上面 示例将雇员数据发布到服务器。 这里调用也是异步调用。 当服务器处理保存请求时,响应返回,并调用相关方法 success/error

在 Angular 中处理帖子

请注意,Angular的$http.postjQuery.post 不同。 Angular 以JSON形式将数据作为JSON发布在http正文中,其中,jQuery以 Content-Type的形式发布值,作为'' application/x-www-form-urlencoded;charset=utf-8 因这里我们需要在服务器上设置一些代码库来解析http正文,或者将 Angular 代码配置为 key-value 对。

配置 $http 服务请求

尽管 $http.get,$http.post 等等的默认实现足以满足大多数目的,但可能存在一些特定的用例,我们需要定制默认的api。 例如我们可能需要设置一些自定义头。转换请求和响应。设置自定义超时。启用/禁用缓存以及设置响应类型。

$http 服务提供了一个内置机制来使用" config"对象定制http请求。 所有 $http.X的api都以最后一个参数作为 config 对象来定制请求。

例如我们可以使用 config 对象的header 属性在 HTTP header 中设置用于获取请求的授权令牌。

 $http.get("empMgr",
 {
 params: {op: 'get'},
 headers: {"AUTH_TOKEN": "1234567890"} // Custom headers put in. })
. success(function(data, status, headers, config) {
 $scope.employee = data; // Sets the employee object in $scope })
. error(function(data, status, headers, config) {
 alert("failure");
 });
 };
});

$http 服务可以通过只传递 config 对象来调用。 config 对象支持以下属性:

The supported options are :
$http({
 method: string,//GET, POST, PUT, HEAD etc
 url: string,//URL of resource being requested
 params: object,//Query parameters, if not string goes as JSON string
 data: string or object,//Data to be sent as request message data
 headers: object,//Map representing the HTTP header
 transformRequest: function transform(data, headersGetter) or an array of functions,//Transforms request
 transformResponse: function transform(data, headersGetter) or an array of functions,//Transforms response
 cache: boolean or Cache object,//Boolean to turn cache on or off
 timeout: number,//Timeout to wait for response from server
 withCredentials: boolean
});

rest式服务通信

如前所述,$http 是用于服务器端通信的低级 API,用于与服务器通信。 在实际应用中,我们必须处理代表软件生态系统中实体的数据对象。 在常规场景中,我们必须为通用功能编写代码库,比如使用 $http 服务创建。读取。更新和 delete。

 myAppModule.factory('EmployeeService', ['$http', function($http) {
 var url = 'rest/employee';
 return {
 get: function(empID) {
 return $http.get(url + '/' + empId);
 },
 save: function(employeeObj) {
 var url = employeeObj.id? url + '/' + employeeObj.id : url;
 return $http.post(url, employeeObj);
 },
 query: function(empID) {
 return $http.get(url + '/' + empID.id + '/reportees');
 },
 calculateSalary: function(employee) {
 return $http.post(url + '/' + employee.id, employee, {params: {admin: true}});
 }};
 }
]);

为了解决这种重复的任务,Angular 提供了内置支持使用 $resource 对象创建服务。 这里对象提供常见功能,例如:

  • GET
  • Save
  • Query
  • Remove
  • DELETE

,连一行都没写。 它还提供了在服务中创建新方法的功能。 下面的代码段解释了概念:

// Service to fetch EmployeeListService angularModule.factory("EmployeeListService", ['$resource', function($resource){
 return $resource('rest/employee/:empId',
 {empId: '@id'},
 {calculateSalary: {method: 'POST', params: {charge: true}, isArray: false}});
}]) ; 

现在 EmployeeListService<code> 服务在不编写一行代码的情况下具有以下方法:

  • EmployeeListService.get()
  • EmployeeListService.save
  • EmployeeListService.save
  • EmployeeListService.query()
  • EmployeeListService.remove()
  • EmployeeListService.delete()

自定义方法

除了 上面 方法之外,$resource 服务还提供了创建新方法的功能。 这有助于我们使定制的rest式调用成为服务器。 下面的示例演示如何在 $resource 服务中定义自定义方法:

// Service to fetch ReporteesangularModule.factory("EmployeeReporteeService", ['$resource', function($resource){
 return $resource('rest/employee/:empId/reportees',
 {empId: '@id'},
 /**
 * Custom method to find contact numbers.
 *
 * Method type is GET
 * Additional Query parameter admin=true is sent
 * The expected return type is an Array
 */ {contactNumbers: {method: 'GET', params: {admin: true}, isArray: true}});
}]);

如何使用包含 $resource 对象?

让我们看看如何在代码库中包含这个 $resource 服务:

//Step 1 : $resource is an optional module in Angular defined in a separate file,//so we have to include its JS file in our HTML file.<script src=" angular-resource.js"></script>// Step 2: Include ngResource dependency in the module where we want to use it. This code will be controller.jsangular.module('samplemodule', ['ngResource']);// Step 3: Then inject the $resource in the service where you want to use it.myAppModule.factory('EmployeeService', ['$resource', function($resource) {

$resource 服务接受 1个必需参数和 2可选参数:

  • URL ;必需:资源可用的URL
  • 查询参数:要通过URL附加函数传递的参数: 我们希望添加到服务的其他方法。

源代码

附加的代码库是一个基于 Maven的项目,在 Netbeans IDE中创建。 在服务器端,它使用 Java Servlet作为 $http.get$http.post。 对于rest式服务创建,它使用 Jersey 1.8. 它还使用GSON库将 List/Employee 对象转换为 JSON。

摘要

在本文中,我们只讨论了AngularJS与服务器的通信的基本。 在下一篇文章中,我们将重点讨论 $q, 交叉站点请求伪造。安全性。测试。

引用


COM  Server  COMM  angular  Basic  通讯  
相关文章