Spring国际认证指南|了解如何使用 AngularJS 检索网页数据

原创

IT胶囊

发布于 2022-04-13 14:09:17

2.4K0

发布于 2022-04-13 14:09:17

文章被收录于专栏：IT技能应用

原标题：Spring国际认证指南|了解如何使用 AngularJS 检索网页数据

Spring国际认证指南｜使用 AngularJS 使用 RESTful Web 服务

本指南将引导您编写一个使用基于 Spring MVC 的RESTful Web 服务的简单 AngularJS 客户端。

您将构建什么

您将构建一个使用基于 Spring 的 RESTful Web 服务的 AngularJS 客户端。具体来说，客户端将使用在使用 CORS 构建 RESTful Web 服务中心创建的服务。

AngularJS 客户端将通过index.html在浏览器中打开文件来访问，并将在以下位置使用接受请求的服务：

http://rest-service.guides.spring.io/greeting

该服务将以JSON表示的问候进行响应：

{"id":1,"content":"Hello, World!"}复制

AngularJS 客户端会将 ID 和内容呈现到 DOM 中。

rest-service.guides.spring.io 上的服务运行CORS 指南中的代码，稍作修改：对/greeting端点开放访问，因为应用程序@CrossOrigin在没有域的情况下使用。

你需要什么

约15分钟
最喜欢的文本编辑器
现代网络浏览器
互联网连接

创建一个 AngularJS 控制器

首先，您将创建将使用 REST 服务的 AngularJS 控制器模块：

public/hello.js

angular.module('demo', [])
.controller('Hello', function($scope, $http) {
    $http.get('http://rest-service.guides.spring.io/greeting').
        then(function(response) {
            $scope.greeting = response.data;
        });
});复制

这个控制器模块被表示为一个简单的 JavaScript 函数，它被赋予了 AngularJS$scope和$http组件。它使用该$http组件在“/greeting”处使用 REST 服务。

如果成功，它会将服务返回的 JSON 分配给$scope.greeting，从而有效地设置一个名为“greeting”的模型对象。通过设置该模型对象，AngularJS 可以将其绑定到应用程序页面的 DOM，呈现给用户查看。

创建应用程序页面

现在您已经有了一个 AngularJS 控制器，您将创建一个 HTML 页面，该页面会将控制器加载到用户的 Web 浏览器中：

public/index.html

<!doctype html>
<html ng-app="demo">
	<head>
		<title>Hello AngularJS</title>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    	<script src="hello.js"></script>
	</head>

	<body>
		<div ng-controller="Hello">
			<p>The ID is {{greeting.id}}</p>
			<p>The content is {{greeting.content}}</p>
		</div>
	</body>
</html>复制

请注意该部分中的以下两个脚本标记head。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="hello.js"></script>复制

第一个脚本标签从内容交付网络 (CDN) 加载缩小的 AngularJS 库 ( angular.min.js )，这样您就不必下载 AngularJS 并将其放置在您的项目中。它还从应用程序的路径加载控制器代码 ( hello.js )。

AngularJS 启用了几个自定义属性及标准 HTML 标记一起使用。在 index.html 中，有两个这样的属性在起作用：

<html>标记具有ng-app指示的此页面是 AngularJS 应用程序的属性。
<div>标签的ng-controller属性设置为 reference Hello，即控制器模块。

另请注意使用占位符的两个<p>标签（由双花括号标识）。

<p>The ID is {{greeting.id}}</p>
<p>The content is {{greeting.content}}</p>复制

占位符引用将在成功使用 REST 服务时设置的模型对象的id和content属性。greeting

运行客户端

要运行客户端，您需要将它从 Web 服务器提供到浏览器。Spring Boot CLI（命令行界面）包括一个嵌入式 Tomcat 服务器，它提供了一种简单的方法来提供服务 Web 内容。有关安装和使用 CLI 的更多信息，请参阅使用 Spring Boot 构建应用程序。

为了从 Spring Boot 的嵌入式 Tomcat 服务器提供静态内容，您还需要创建最少量的 Web 应用程序代码，以便 Spring Boot 知道启动 Tomcat。以下app.groovy脚本足以让 Spring Boot 知道您要运行 Tomcat：

app.groovy

@Controller class JsApp { }复制

您现在可以使用 Spring Boot CLI 运行该应用程序：

春季运行 app.groovy

应用程序启动后，在浏览器中打开http://localhost:8080 ，您会在其中看到：

每次刷新页面时，ID 值都会增加。

概括

恭喜！您刚刚开发了一个使用基于 Spring 的 RESTful Web 服务的 AngularJS 客户端。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

angularjs