角简单的路由不工作 [英] Angular simple routing is not working
问题描述
我特林建立单页的应用程序，但我有角路由，不工作的问题。
I'm tring build single page app, but i have problem with angular routing it doesnt work.
我使用的春天开机，thymeleaf和角1.4.8。
I'm using spring boot, thymeleaf and angular 1.4.8.
我在此基础上的例子的https： //$c$c.angularjs.org/1.4.8/docs/api/ngRoute/directive/ngView
下面是我的主控制器：
@Controller
public class HomeController {
@RequestMapping(value = "/")
public String index(){
return "index";
}
}
下面是我的index.html
Here is my index.html
<!DOCTYPE html>
<html>
<head ng-app="ngViewExample">
<title></title>
</head>
<body>
<div ng-controller="MainCtrl as main">
<a href="#/test">test</a>
<div ng-view=""></div>
</div>
<script type="text/javascript" th:src="@{/js/lib/angular.js}" />
<script type="text/javascript" th:src="@{/js/lib/angular-route.js}" />
<script type="text/javascript" th:src="@{/js/lib/angular-resource.js}" />
<script type="text/javascript" th:src="@{/js/lib/underscore.js}" />
<script type="text/javascript" th:src="@{/js/lib/restangular.js}" />
<script type="text/javascript" th:src="@{/js/src/index.js}" />
</body>
</html>
index.js
index.js
var home = angular.module('ngViewExample', ['ngRoute']);
home.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/test', {
templateUrl: 'test.html',
controller: 'TestCtrl',
controllerAs: 'test'
})
}])
.controller('MainCtrl',
function() {
})
.controller('TestCtrl',
function() {
});
和内容我想传递给NG-视图
And content I wish to pass to ng-view
的test.html
test.html
<div>
Hello
</div>
一切都加载罚款，但路由只是在这里没有工作。
Everything is loading fine but routing just not working here.
推荐答案
在昨日联系我这个问题：
you linked me this question yesterday:
在这里我的答案至今
让我们先从如何通过弹簧引导提供静态内容
如图今年春天博客放置在目录中的所有资源
As shown in this spring blog all resources placed in the directories
- / META-INF /资源/
- /资源/
- /静态/
- /公/
你的classpath里面被添加为静态资源。因此，例如，只要把你的index.html到你的classpath里面/公/目录下，你会不会需要你的的HomeController 了
inside your classpath are added as static resources. So for example just put your index.html into the /public/ directory inside your classpath and you won't need your HomeControlleranymore
我们的角度部分
首先把NG-应用指令在＆LT; HTML＆GT; 或＆LT;身体GT; 标签。
我看不到你角度code任何问题至今。您可以验证，该部分HTML可在/测试终点？如果没有，请按照下列步骤我告诉你上面。只要把对的test.html /公/ 目录你的classpath里面里面。
First of all put the ng-app directive at the <html>or the <body> tag.
I can't see any problems with your angular code so far. Can you verify, that the partial HTML is available at the /test endpoint? If not please follow the steps i told you above. Just put the test.html inside the /public/directory inside your classpath.
是否有在控制台中的任何错误，如果你打开浏览器devtools并重新加载页面？
Are there any errors in the console if you open the browser devtools and reload the page?
如果你能在Github上提供您的项目，我将看看它。
If you could provide your project on Github i will have a look at it.
这篇关于角简单的路由不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
