Spring 启动 ngRoute

Question

我正在尝试制作具有 Spring 后端和 AngularJS 前端的单页应用程序。我已经按照教程查找了类似的问题，但 ngRoute 似乎无法与 Spring 后端一起使用（我让它与 NodeJS 后端一起工作）。

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <title>Spring Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
    <script src="../static/index.js"></script>
</head>

<body ng-app="index" ng-controller="indexController">
    <a href="/test">test</a>
    <div ng-view=""></div>
</body>

</html>

test.html

<div>
    Template loaded
</div>

index.js

'use strict';

const indexModule = angular.module('index', ['ngRoute']);

indexModule.controller("indexController", function indexController($scope) {

});

indexModule.config(function($routeProvider) {
   $routeProvider.when('/test', {templateUrl: 'test.html'});
});

SringDemoController.java

package com.springdemo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class SpringDemoController {

    @RequestMapping({ "/" })
    public String getIndexTemplate() {
        return "index";
    }

}

我得到this error when I click the link and the URL changes to http://localhost:8080/test

Answer 1

这是解决方案。

索引页：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test title</title>
</head>
<body ng-app="TestApp">

    <div>
        <h1>The Index</h1>
        <ul>
            <li>
                <a ng-href="#!/test"> Temp One</a>
            </li>
        </ul>


        <div ng-view=""></div>
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-route.js"></script>


 <script src="js/config.js"></script>
 <script src="js/controller/main.js"></script>
 <script src="js/controller/test.js"></script>


</body>
</html>

路由器配置（名为 config.js）

'use strict'

angular.module('TestApp' , ["ngRoute"])
       .config(function($routeProvider){

            $routeProvider
            .when('/' , {
                templateUrl : "view/main.html",
                controller : 'MainController',
                controllerAs : 'main'
            })
            .when('/test' , {
                templateUrl : "view/test.html",
                controller : 'TestController',
                controllerAs : 'test'
            })
            .otherwise({
                    redirectTo: '/'
            });
       });

路线 server-side controller :

package com.testApp;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class ServerController {

    @RequestMapping(value = "/test")
    public String getTestTemp() {
        return "static/test";
    }
}

更新： 实际上，不需要 ServerController 内部的方法。可以这样写

package com.testApp;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController 
@RequestMapping(value = "/test")
public class ServerController {


}

因此，如果您在此控制器中编写任何 REST 方法，客户端和服务器端的端点都将是 /test/{the Name of your endPoint }

这是项目结构

如果添加更多模板，请确保在客户端和服务器端创建 route

Spring 启动 ngRoute

Spring Boot ngRoute

spring

angularjs

spring-boot

ngroute