角度简单路由不起作用 [英] Angular simple routing is not working
问题描述
我正在构建单页应用程序，但我遇到了角度路由问题，它不起作用.
我使用的是 spring boot、thymeleaf 和 angular 1.4.8.
我基于这个例子 https://code.angularjs.org/1.4.8/docs/api/ngRoute/directive/ngView
这是我的主控制器:
@Controller公共类 HomeController {@RequestMapping(value = "/")公共字符串索引(){返回索引"；}}这是我的 index.html
<head ng-app="ngViewExample"><title></title><身体><div ng-controller="MainCtrl as main"><a href="#/test">test</a><div ng-view=""></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}"/></html>
index.js
var home = angular.module('ngViewExample', ['ngRoute']);home.config(['$routeProvider',功能($routeProvider){$routeProvider.when('/测试', {templateUrl: 'test.html',控制器:'TestCtrl'，控制器为:'测试'})}]).controller('MainCtrl',功能() {}).controller('TestCtrl',功能() {});以及我希望传递给 ng-view 的内容
test.html
你好一切正常，但路由在这里不起作用.
你昨天给我链接了这个问题:
这是我目前的回答
让我们从如何通过 Spring Boot 提供静态内容
如这个spring blog所示 放置在目录中的所有资源
- /META-INF/resources/
- /resources/
- /静态/
- /公共/
在您的类路径中添加为静态资源.例如，只需将您的 index.html 放入类路径中的/public/目录中，您就不再需要 HomeController
现在到角部分
首先将 ng-app 指令放在 或 标签中.到目前为止，我看不到您的角度代码有任何问题.您能否验证部分 HTML 是否在/test 端点可用?如果没有，请按照我上面告诉您的步骤进行操作.只需将 test.html 放在类路径中的 /public/ 目录中.
如果您打开浏览器 devtools 并重新加载页面，控制台是否有任何错误?
如果你能在 Github 上提供你的项目，我会看看它.
I'm tring build single page app, but i have problem with angular routing it doesnt work.
I'm using spring boot, thymeleaf and angular 1.4.8.
I'm basing on this example https://code.angularjs.org/1.4.8/docs/api/ngRoute/directive/ngView
Here is my main controller:
@Controller
public class HomeController {
@RequestMapping(value = "/")
public String index(){
return "index";
}
}
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
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() {
});
And content I wish to pass to ng-view
test.html
<div>
Hello
</div>
Everything is loading fine but routing just not working here.
you linked me this question yesterday:
here my answer so far
Let's start with How to provide static content via Spring Boot
As shown in this spring blog all resources placed in the directories
- /META-INF/resources/
- /resources/
- /static/
- /public/
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
Now to the angular part
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.
Are there any errors in the console if you open the browser devtools and reload the page?
If you could provide your project on Github i will have a look at it.
这篇关于角度简单路由不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
