`

AngularJS中与服务器交互

JavaScriptAngularJS$http 
阅读更多

        真正的应用需要和真实的服务器进行交互，无论你是想把数据持久化到云端，还是需要与其他用户进行实时交互，都需要让应用与服务器时进行交互。

        为了实现这一点，Angular提供了一个叫做$http的服务。它提供了一个可扩展的抽象方法列表，使得与服务器的交互更加容易。它支持HTTP、JSONP和CORS方式。它还包含了安全性支持，避免JSON格式的脆弱性和XSRF（跨站请求伪造）。它让你可以轻松的转换请求和响应数据，甚至还实现了简单的缓存。

        比如说我们已经创建了一个服务器，当查询/products路径时，它会以JSON格式返回一个商品列表。

        返回的响应示例如下：

products.json

[
	{
		"id":0,
		"title":"Paint pots",
		"description":"Pots full of paint",
		"price":3.95
	},
	{
		"id":1,
		"title":"Polka dots",
		"description":"Dots with that polka groove",
		"price":12.95
	},
	{
		"id":2,
		"title":"Pebbles",
		"description":"Just little rocks,really",
		"price":6.95
	}
]

模板和控制器如下：

<html ng-app='myApp'>
<head>
	<title>Http实例</title>
</head>
<body ng-controller='ShoppingController'>
	<h1>Shop!</h1>
	<table>
		<tr ng-repeat="item in items">
			<td>{{item.title}}</td>
			<td>{{item.description}}</td>
			<td>{{item.price | currency}}</td>
		</tr>
	</table>
	<script src="lib/angular/angular.js"></script>
	<script>
		var myApp=angular.module('myApp',[]);
		myApp.controller('ShoppingController', function($scope, $http) {
			$http.get('/products').success(function(data, status, headers, config){
				$scope.items = data;
			});
		});
	</script>
</body>
</html>

        当然，上面的代码由于没有后台的/products服务接口，所以会报404错误。

        如果要让上面的代码可以运行，有如下两种方法：

一.在工程下新建一个用于保存json数据的文件

        如在WebContent下新建json文件夹，下面建products.json，内容如返回的products.json，然后进一步修改模板和控制器如下：

<html ng-app='myApp'>
<head>
	<title>Http实例</title>
</head>
<body ng-controller='ShoppingController'>
	<h1>Shop!</h1>
	<table>
		<tr ng-repeat="item in items">
			<td>{{item.title}}</td>
			<td>{{item.description}}</td>
			<td>{{item.price | currency}}</td>
		</tr>
	</table>
	<script src="lib/angular/angular.js"></script>
	<script>
		var myApp=angular.module('myApp',[]);
		myApp.controller('ShoppingController', function($scope, $http) {
			$http.get('json/products.json').success(function(data, status, headers, config){
				$scope.items = data;
			});
		});
	</script>
</body>
</html>
二.采用ngResource方式
        当然也需在WebContent下新建json文件夹，此文件夹下再建products.json，内容如返回的products.json。 
<html ng-app='myApp'>
<head>
	<title>Http实例</title>
</head>
<body ng-controller='ShoppingController'>
	<h1>Shop!</h1>
	<table>
		<tr ng-repeat="item in items">
			<td>{{item.title}}</td>
			<td>{{item.description}}</td>
			<td>{{item.price | currency}}</td>
		</tr>
	</table>
	<script src="lib/angular/angular.js"></script>
	<script src="lib/angular/angular-resource.js"></script>
	<script>
		var myApp=angular.module('myApp',['ngResource']);
		myApp.controller('ShoppingController', function($scope, $http, Products) {
			$scope.items = Products.query();
		}).factory('Products', function($resource){
		  return $resource('json/products.json', {}, {
		    query: {method:'GET', isArray:true}
		  });
		});
	</script>
</body>
</html>

运行效果如下：


        从长远来看，让服务来代理与服务器交互的工作对我们有好处，这个服务可以被多个控制器共享。

 

资料来源：《用AngularJS开发下一代Web应用》

  • 大小: 19.1 KB
分享到：
| AngularJS中使用路由和$location切换视图
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    AngularJs与web服务器交互

    在AngularJS中，与Web服务器交互主要依赖于其内置的`$http`服务。`$http`服务提供了与HTTP协议兼容的方法，如GET、POST、PUT、DELETE等，用于向服务器发送请求并接收响应。它使用Promise API来处理异步操作，使得...

    AngularJS与服务器交互前端和后端代码

    **AngularJS 与服务器交互** AngularJS 是一个强大的前端JavaScript框架，主要用于构建单页应用程序（SPA）。它提供了双向数据绑定、依赖注入、模块化和MVC（Model-View-Controller）架构模式，使得前端开发更加...

    angularjs实现与服务器交互分享

    ### AngularJS实现与服务器交互详解 #### 一、引言 在现代Web开发中，客户端与服务器之间的交互是必不可少的一部分。对于大多数应用而言，无论是为了将数据存储在云端，还是为了实现实时通信功能，都需要应用程序...

    AngularJS实现与后台服务器进行交互的示例讲解

    AngularJS作为一个非常实用的前端框架，我们知道...在angularJS中提供了一种与远程Http服务器交互的服务，$http $http是angularJS中的一个可信服务，利用浏览器的XMLHTTPRequest核心对象与远程http服务器进行交互。 $ht

    AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】

    本文实例讲述了AngularJS实现与Java Web服务器交互操作的方法。分享给大家供大家参考，具体如下： AngularJS是Google工程师研发的产品，它的强大之处不是几句话就能描述的，只有真正使用过的人才能体会到，笔者准备...

    AngularJS 中文API参考手册

    3. 控制器（Controller）：控制器是MVC模式中的C部分，负责处理业务逻辑和视图之间的交互。 4. 路由（Routing）：AngularJS的路由系统允许根据URL导航到不同的视图，实现页面无刷新跳转。 5. 服务（Service）：...

    angularJS理论与实战.ppt

    3. HTTP交互：使用$http服务进行Ajax请求，与服务器进行数据交互。 4. 路由配置：使用uirouter配置路由，实现页面间的动态加载和导航。 5. 自定义指令：根据需求创建自定义指令，增强DOM元素的功能。 四、最佳实践 ...

    angularJS之$http：与服务器交互示例

    $http服务是AngularJS提供的用于与远程HTTP服务器进行通信的核心服务，它封装了浏览器原生的XMLHttpRequest对象，使得开发者可以更方便地通过AJAX与服务器进行数据交互。 $http服务支持多种HTTP请求方法，如GET、...

    angularjs http与后台交互的实现示例

    在AngularJS中，与后台交互是应用程序功能的重要组成部分，特别是在构建单页应用(SPA)或混合移动应用时。AngularJS 提供了$http服务，允许开发者轻松地发起HTTP请求并与服务器进行数据交换。本文将深入探讨如何在...

    AngularJS入门教程中SQL实例详解

    在AngularJS中，SQL（Structured Query Language）的集成主要用于与后端数据库进行交互，以便获取、更新、删除或插入数据。在本入门教程中，我们将深入理解如何在AngularJS应用程序中使用SQL，以及如何通过HTTP服务...

    AngularJS 中文Api参考手册

    4. **服务（Services）**：服务是可重用的代码块，可用于存储数据、执行复杂的业务逻辑或与服务器通信。AngularJS 内置了一些服务，如 $http 用于HTTP请求，$scope 用于管理作用域内的数据。 5. **控制器...

    AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】

    本文实例讲述了AngularJS与服务器Ajax交互操作。分享给大家供大家参考，具体如下： AngularJS从Web服务器请求资源都是通过Ajax来完成，所有的操作封装在$http服务中，$http服务是只能接收一个参数的函数，这个参数是...

    angularJs权威和精通angularjs

    服务是AngularJS中的单例对象，它们负责执行特定任务，如$http用于与服务器通信，$location用于处理URL，$q用于异步编程等。 **7. Routing：** AngularJS的路由功能使得在单页面应用中导航变得简单，通过uirouter或...

    AngularJS+ NodeJS

    2. **前后端分离**：AngularJS处理前端交互，Node.js作为API服务器，提供RESTful接口。 3. **数据流**：AngularJS通过$http服务向Node.js发送Ajax请求，Node.js处理数据并返回。 4. **安全实践**：如JWT（JSON Web ...

    AngularJS中文api chm格式.rar_angularjs

    AngularJS 的服务是可复用的代码单元，如 $http 用于与服务器进行 HTTP 通信，$scope 作为作用域，管理着模型数据，$q 用于异步操作的承诺（Promise）管理等。服务可以通过依赖注入在多个组件之间共享，提高代码的...

    angularjs CURD Example

    1. **创建（Create）**：在AngularJS中，创建新记录通常涉及到向服务器发送POST请求。这可以通过AngularJS的$http服务或者使用ngResource模块来实现。ngResource提供了一个资源对象，可以方便地执行CRUD操作。你需要...

Magicbox
Global site tag (gtag.js) - Google Analytics