没有模板引擎的 Spring MVC Angular Js 集成答案

【问题标题】：Spring MVC Angular Js integration without template engine没有模板引擎的 Spring MVC Angular Js 集成
【发布时间】：2014-12-19 00:44:42
【问题描述】：

我想在没有任何模板引擎的情况下将 Spring MVC 与 Angular JS 集成

我检查了几个答案，但无法解决。下面我列出了 Xml、Controller 和 Html 文件。我到底错过了什么？

app-Servlet.xml

 <?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:beans="http://www.springframework.org/schema/beans"
    xmlns:context="http://www.springframework.org/schema/context"
    xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
    <annotation-driven />
    <context:component-scan base-package="com.angular.app" />
    <resources mapping="/views/**" location="/WEB-INF/views/" />
    <resources mapping="/resources/**" location="/resources/" />
    <beans:bean
        class="org.springframework.web.servlet.view.ContentNegotiatingViewResolver">
        <beans:property name="order" value="1" />
        <beans:property name="mediaTypes">
            <beans:map>
                <beans:entry key="html" value="text/html" />
            </beans:map>
        </beans:property>
    </beans:bean>
    <beans:bean
        class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <beans:property name="order" value="2" />
        <beans:property name="prefix" value="/WEB-INF/views/" />
        <beans:property name="suffix" value="" />
    </beans:bean>
</beans:beans>

控制器

@RequestMapping(value = "/", method = RequestMethod.GET)
    public String home(Locale locale, Model model) {
        logger.info("Welcome home! The client locale is {}.", locale);

        Date date = new Date();
        DateFormat dateFormat = DateFormat.getDateTimeInstance(DateFormat.LONG,
                DateFormat.LONG, locale);

        String formattedDate = dateFormat.format(date);

        model.addAttribute("serverTime", formattedDate);
            return "home.html";
    }
     @RequestMapping(value="/app/welcome",method = RequestMethod.GET)
     public @ResponseBody String welcome() {     
         logger.info("entering into original controller");
         System.out.println("entering into original controller");

         String text="Hello World!!!! Welcome";

      return text;

     }

home.html

<html>
<head>
<script
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
    <div ng-app="">
        <div>
            Name: <input type="text" ng-model="name">
        </div>
        <p ng-bind="name"></p>
        <div ng-controller="helloworldcontroller">
            <h1>{{title}}</h1>
        </div>
    </div>
    <script>
        function helloworldcontroller($scope, $http) {
            $http.get("http://localhost:8080/app/welcome").success(
                    function(response) {
                        $scope.title = response;
                        alert("sucess");
                    });
        }
    </script>
</body>
</html>

【问题讨论】：

标签： angularjs spring-mvc

【解决方案1】：

我正在使用 Spring MVC + AngularJs 架构进行一些项目，可以为您提供以下反馈：

您正试图通过 Spring MVC 控制器控制 html 页面的路由，我认为这不是最好的方法，因为 AngularJs 有自己的引擎来通过 ng-route 或 ui-router 控制路由和页面。

在我的项目架构中，使用 Spring MVC 项目提供完整的 REST API 以供 Web AngularJs 应用程序使用。

项目结构如下：

parent-maven-project: 
|_project-core: Have all bussiness logic, data source config, persistence config, Services, Repositories, Entities, etc. 
|_project-web: Have a angularJs App (that controls the html pages routing using ui-router), API REST (Spring MVC Controllers) to be consumed and give the business layer access (project-core). 
|_project-ear: Pack core and web projects to deploy on JBoss EAP 6.2

在 Spring MVC REST 层 (project-web) |设置一个 Spring OAuth2 服务器，用于对用户进行身份验证并通过 Spring Security 进行会话和访问控制。当用户登录应用程序时，angularjs 应用程序会收到一个访问令牌承载，用于在用户保持登录的所有时间内发出请求。所有 REST 服务都在请求范围内，是无状态的，然后使用令牌检索 Spring Security 会话并进行所有用户访问验证。

【讨论】：