弹簧引导ngRoute
弹簧引导ngRoute
提问于 2017-10-21 07:52:34
我正在尝试使用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";
}
}当我单击链接并将这一错误更改为http://localhost:8080/test时，会得到http://localhost:8080/test
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-10-21 09:33:18
这是解决办法。
索引页：
<!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。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46861231
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号