角简单路由不起作用

小编典典

角简单路由不起作用

spring-boot

我正在尝试构建单页应用程序，但是我在角度路由方面有问题，它不起作用。

我正在使用弹簧靴，百里香叶和角1.4.8。

我基于此示例 https://code.angularjs.org/1.4.8/docs/api/ngRoute/directive/ngView

这是我的主控制器：

@Controller
public class HomeController {
    @RequestMapping(value = "/")
    public String index(){
        return "index";
    }
}

这是我的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() {

    });

我希望传递给ng-view的内容

test.html

<div>
    Hello
</div>

一切都很好，但路由在这里不起作用。

阅读 197

2020-05-30

共1个答案

小编典典

您昨天将这个问题与我联系：

到目前为止我的答案

让我们从 如何通过Spring Boot提供静态内容* 开始 *

如本spring博客所示，所有资源都放在目录中

/ META-INF /资源/
/资源/
/静态的/
/上市/

在类路径中添加为静态资源。因此，例如，只要把你的index.html到你的classpath里面/公/目录，你将不再需要你HomeController了

现在到角部

首先，将ng-app指令放在<html>或<body>标记处。到目前为止，我看不到您的角度代码有任何问题。您可以验证/
test端点上是否可以使用部分HTML吗？如果没有，请按照我上面告诉您的步骤进行。只需将test.html放在/public/类路径内的目录中即可。

如果打开浏览器devtools并重新加载页面，控制台中是否有任何错误？

如果您可以在Github上提供您的项目，那么我会看一下。

2020-05-30