使用 AngularJS 使用 RESTful Web 服务

时间：2022-12-22 16:10:27

使用 AngularJS 使用 RESTful Web 服务

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

您将构建的内容

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

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

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

该服务将以杰伦问候语的表示形式：

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

AngularJS客户端会将ID和内容渲染到DOM中。

rest-service.guides.spring.io 处的服务正在从可逆期指南​只需稍作修改：对终结点有开放访问，因为应用在没有域的情况下使用。​​/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和组件。它使用该组件在“/greeting”处使用 REST 服务。​​$scope​​​​$http​​​​$http​​

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

创建应用程序页

现在您已经有一个 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 中，有两个这样的属性在起作用：

  • 该标记具有指示此页面是 AngularJS 应用程序的属性。<html>ng-app
  • 该标签具有设置为引用控制器模块的属性。<div>ng-controllerHello

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

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

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

运行客户端

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

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

​​app.groovy​​

@Controller class JsApp { }

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

spring run app.groovy

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

使用 AngularJS 使用 RESTful Web 服务

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

总结

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

标签：

相关文章