Demo project for Spring Boot 【1】spring-boot-starter【2】Consuming a RESTful Web Service with 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的 s c o p e 和 scope和 scopehttp组件。它使用 h t t p 组 件 在 “ / g r e e t i n g ” 处 使 用 R E S T 服 务 。 如 果 成 功 , 它 将 把 从 服 务 返 回 的 J S O N 分 配 给 http组件在“/greeting”处使用REST服务。 如果成功,它将把从服务返回的JSON分配给 http/greeting使RESTJSON范围.问候语,有效地设置了一个名为“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.

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 {{}}

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.


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






package com.example.demo;

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

public class DemoAngularJsApplication {

	public static void main(String[] args) {, args);


package com.example.demo;

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

	public String getid() {
		return id;

	public void setid(String 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;

public class MvcConfig implements WebMvcConfigurer {

	public void addViewControllers(ViewControllerRegistry registry) {

angular.module('demo', [])
.controller('Hello', function($scope, $http) {
        then(function(response) {
            $scope.greeting =;
{"id":1,"content":"Hello, World!"}
<!doctype html>
<html ng-app="demo">
		<title>Hello AngularJS</title>
		<script src="/angular/angular.min.js"></script>
    	<script src="/js/hello.js"></script>

		<div ng-controller="Hello">	
			<p>The ID is {{}}</p>
			<p>The content is {{greeting.content}}</p>


©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页