AngularJS Spring MVC 设置答案

【问题标题】：AngularJS Spring MVC setupAngularJS Spring MVC 设置
【发布时间】：2014-08-09 10:45:43
【问题描述】：

我是 Spring MVC 的初学者。我想使用 AngularJS 和 Spring MVC 来设置一个 RESTful 单页应用程序。

作为一个普通的 web 应用，当用户请求一个 URI 时，后端 web 服务器将首先传输 HTML 模板到前端，然后使用 JSON 进行通信。

我只是想知道 HTML 模板是如何从 Spring MVC 服务传输到前端的。

任何信息将不胜感激。非常感谢。

【问题讨论】：

标签： spring angularjs spring-mvc

【解决方案1】：

一个非常简单的例子（取自 Spring Guide Consuming a RESTful Web Service with AngularJS）如下：

创建一个可静态访问的 html 页面（如指南中所做的那样使用 Spring Boot 意味着有一些标准位置将自动用于静态资源 - 如果您不使用 Spring Boot，则必须配置这个），比如：

<!doctype html>
<html ng-app>
    <head>
        <title>Hello AngularJS</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/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.message}}</p>
        </div>
    </body>
</html>

hello.js 脚本可以是

function Hello($scope, $http) {
    $http.get('http://yourpath/greeting').
        success(function(data) {
            $scope.greeting = data;
        });
}

然后对应的 Spring Service 将是：

@RestController
public class Controller {

   @RequestMapping("/greeting")
   public Greeting greeting() {
      return new Greeting();
   }

}

public class Greeting {
   private final Integer id;
   private final String message;

   public Greeting() {
      this(1,"test")
   }

   public Greeting(Integer id, String message) {
      this.id = id;
      this.message = message;
   }

   public Integer getId() {
      return id;
   }

   public String getMessage() {
      return message;
   }
}

在这个非常简单的示例中，模板被转移到前端只是因为它可以作为静态资源访问。您当然可以想象一个更复杂的场景，其中控制器类似于

@Controller
public class Controller {

   @RequestMapping("/greeting")
   public ModelAndView greeting() {
      return new ModelAndView("someView", someObject);
   }

}

Spring MVC 会将someView 映射到基于配置的ViewResolver 的模板。这样，服务器就可以使用所需的任何数据动态填充模板。

您可以查看更多教程：

【讨论】：

【解决方案2】：

另外，更适合您的要求的恕我直言，不要打扰初始控制器，只需将您的 html 和 javascript 作为静态资源提供，在您的 spring conf 中使用类似这样的东西：

<mvc:resources location="/app/" mapping="/app/**"/>
<mvc:annotation-driven/>

然后只使用 ajax 和 rest 控制器与后端交互。

【讨论】：

非常感谢@NimChimpsky，还需要添加标签。
我有另一个问题，在我编辑 index.html 页面后，我必须重新启动 Web 服务器才能获得更新。有什么方法可以让我刷新网页以获取更新？非常感谢您提供任何信息。
如果你正确设置了你的开发环境，你不应该这样做。你确定浏览器没有缓存页面吗？
是的，我已经清除了浏览器缓存，但还是不行。你能帮忙看看我问这个的问题吗：stackoverflow.com/questions/24361173/…
我知道这是一个老问题，但我的初始控制器确实有问题，我无法摆脱它。解决方案是<mvc:view-controller path="/" view-name="/resources/index.html"/>，但它仍然是一个旁路。如果可以的话，你愿意看看我的问题吗？提前感谢您的帮助。这是：Get rid of first View Controller with Spring 4 and AngularJS