Demo project for Spring Boot 【1】spring-boot-starter【2】Consuming a RESTful Web Service with AngularJS

这是一个使用Spring Boot和AngularJS构建的演示项目的简介。该项目旨在展示如何使用Spring Boot创建RESTful Web服务，以及如何使用AngularJS作为客户端来消费这些服务。
【1】spring-boot-starter
Spring Boot是一个用于快速创建独立、生产级别的基于Spring的应用程序的框架。通过使用Spring Boot，开发人员可以轻松地创建功能丰富的应用程序，同时避免了许多繁琐的配置步骤。
在演示项目中，我们使用Spring Boot作为后端框架来构建RESTful Web服务。Spring Boot提供了一个名为spring-boot-starter的启动器，该启动器包含了创建RESTful服务所需的基本依赖项。通过简单的配置和注解，开发人员可以快速地创建RESTful端点，并使用Spring的数据访问功能来处理数据库交互。
【2】Consuming a RESTful Web Service with AngularJS
AngularJS是一个流行的JavaScript框架，用于构建单页面应用程序（SPA）。在演示项目中，我们将使用AngularJS作为客户端框架，通过RESTful Web服务与后端进行通信。
在客户端代码中，我们将使用AngularJS的依赖注入和模块化功能来组织代码。通过定义服务来处理与RESTful服务的通信，我们可以轻松地获取和更新数据。AngularJS还提供了丰富的指令和控制器，用于创建动态用户界面和处理用户交互。
总之，这个演示项目将展示如何使用Spring Boot和AngularJS创建一个简单的Web应用程序，其中后端提供RESTful Web服务，而前端使用AngularJS作为客户端框架来消费这些服务。通过这个项目，开发人员可以学习如何集成这两个框架，并了解它们在构建现代Web应用程序中的用途。【3】项目结构
这个演示项目将分为两个主要部分：后端（使用Spring Boot）和前端（使用AngularJS）。
后端部分将包括以下目录和组件：

• src/main/java/com/example/demo - 包含后端应用程序的主要代码。
  • DemoApplication.java - 主应用程序类，用于启动Spring Boot应用程序。
  • Controller - 包含RESTful Web服务的控制器类。
  • Model - 包含与数据相关的实体类。
  • Repository - 包含与数据库交互的接口和实现类。
• pom.xml - Maven项目的构建文件，用于管理依赖项和构建过程。
  前端部分将包括以下目录和组件：
• app/ - 包含前端应用程序的主要代码。
  • app.module.ts - 应用程序模块，定义应用程序的依赖项和配置。
  • app.component.ts - 根组件，定义应用程序的视图和逻辑。
  • service.ts - 用于与RESTful服务通信的服务类。
• index.html - 主HTML文件，用于加载AngularJS应用程序。
• package.json - Node.js项目的构建文件，用于管理依赖项和构建过程。
  【4】项目构建和运行
  在构建和运行这个演示项目之前，你需要安装以下工具：
• Java Development Kit (JDK) - 用于编译和运行后端应用程序。
• Apache Maven - 用于构建和管理后端项目。
• Node.js - 用于构建和运行前端应用程序。
• Angular CLI - 用于创建和管理前端项目。
  一旦你安装了这些工具，你可以按照以下步骤构建和运行项目：
  后端（使用Spring Boot）：

1. 在项目根目录下打开终端或命令提示符，并执行以下命令来构建项目：mvn clean package。
2. 在target目录下找到生成的jar文件（例如demo-0.0.1-SNAPSHOT.jar），并使用以下命令来运行它：java -jar demo-0.0.1-SNAPSHOT.jar。
3. 在浏览器中访问http://localhost:8080，你应该能够看到Spring Boot应用程序的默认页面。
   前端（使用AngularJS）：
4. 在项目根目录下打开终端或命令提示符，并执行以下命令来构建前端应用程序：ng build。
5. 在dist目录下找到生成的前端应用程序文件，并将其部署到Web服务器上。你可以使用任何Web服务器（如Apache或Nginx）来部署前端应用程序。
6. 在浏览器中访问你的Web服务器上的前端应用程序URL，你应该能够看到AngularJS应用程序的默认页面。
   【5】总结
   通过这个演示项目，你可以学习如何使用Spring Boot和AngularJS创建一个简单的Web应用程序。你将了解如何使用Spring Boot创建RESTful Web服务，以及如何使用AngularJS作为客户端框架来消费这些服务。通过这个项目，你可以掌握这两个框架的基本概念和用法，并为进一步学习和开发打下坚实的基础。
   This controller module is represented as a simple JavaScript function that is given AngularJS’s $scope and $http components. It uses the $http component to consume the REST service at “/greeting”.
   If successful, it will assign the JSON returned back from the service to $scope.greeting, effectively setting a model object named “greeting”. By setting that model object, AngularJS can bind it to the application page’s DOM, rendering it for the user to see.

这个控制器模块被表示为一个简单的JavaScript函数，它被赋予AngularJS的$scope和$http组件。它使用$http组件在“/greeting”处使用REST服务。如果成功，它将把从服务返回的JSON分配给$范围.问候语，有效地设置了一个名为“greeting”的模型对象。通过设置该模型对象，AngularJS可以将其绑定到应用程序页面的DOM，呈现给用户看。

The first script tag loads the minified AngularJS library (angular.min.js) from a content delivery network (CDN) so that you don’t have to download AngularJS and place it in your project. It also loads the controller code (hello.js) from the application’s path.
The AngularJS library enables several custom attributes for use with standard HTML tags. In index.html, two such attributes are in play:
The tag has the ng-app attribute to indicate that this page is an AngularJS application.
The

tag has the ng-controller attribute set to reference Hello, the controller module.
Also note the two

tags which use placeholders (identified by double-curly-braces).

The ID is {{greeting.id}}

The content is {{greeting.content}}

The placeholders reference the id and content properties of the greeting model object which will be set upon successfully consuming the REST service.

第一个脚本标记加载缩小的AngularJS库(最小角度js)从内容交付网络（CDN）中，这样您就不必下载AngularJS并将其放入项目中。它还加载控制器代码(你好.js)从应用程序的路径。
AngularJS库支持几个自定义属性，用于标准HTML标记。在索引.html，有两个这样的属性在起作用：

标记具有ngapp属性，指示此页面是AngularJS应用程序。

标记将ng controller属性设置为引用控制器模块Hello。 还要注意使用占位符的两个

标记（由双大括号标识）。

身份证是{{问候语.id}}在

内容是{{问候语.content}}在

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

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoAngularJsApplication {

	public static void main(String[] args) {
		SpringApplication.run(DemoAngularJsApplication.class, args);
	}

}

package com.example.demo;

public class greeting {
	private String id;
	private String content;


	public String getid() {
		return id;
	}

	public void setid(String id) {
		this.id = id;
	}

	public String content() {
		return content;
	}

	public void setcontent(String content) {
		this.content = content;
	}
}

package com.example.demo;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class MvcConfig implements WebMvcConfigurer {

	public void addViewControllers(ViewControllerRegistry registry) {
		registry.addViewController("/greeting").setViewName("greeting");
		registry.addViewController("/").setViewName("index");
	}

}

angular.module('demo', [])
.controller('Hello', function($scope, $http) {
    $http.get('http://localhost:8080/greeting').
        then(function(response) {
            $scope.greeting = response.data;
        });
});

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

<!doctype html>
<html ng-app="demo">
	<head>
		<title>Hello AngularJS</title>
		<script src="/angular/angular.min.js"></script>
    	<script src="/js/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>