Spring Boot ngRoute的 [英] Spring Boot ngRoute
问题描述
我正在尝试制作一个具有Spring后端和AngularJS前端的单页应用程序.我已经按照教程学习了类似的问题，但是ngRoute似乎不适用于Spring后端(我可以将其与NodeJS后端一起使用).
I'm trying to make a single page application with a Spring back end and an AngularJS front end. I've followed tutorials and looked up similar questions but ngRoute just doesn't seem to work with a Spring back end (I got it to work with a NodeJS back end).
index.html
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
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
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";
}
}
当我单击链接并将URL更改为 http://localhost:8080/test
I get this error when I click the link and the URL changes to http://localhost:8080/test
推荐答案
这是解决方案.
索引页面:
<!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)
The Router config (its called 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内部的方法.可以这样写
UPDATE : actually, the method inside the ServerController is not needed. It can be written as follows
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 }
So if you write any REST method in this controller, the endpoint from both client and server side will be /test/{the Name of your endPoint }
这是项目结构
如果添加更多模板，请确保在客户端和服务器端都创建route
If you add more templates, make sure you create the routeon the client side and also the server side
这篇关于Spring Boot ngRoute的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
