angularjs – 角度简单路由不起作用

我正在构建单页应用程序,但我有角度路由的问题,它不起作用.

我正在使用弹簧靴,百里香和棱角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>

一切都很好,但路由不在这里工作.

你昨天把这个问题联系了我：

到目前为止我的答案

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

如this spring blog所示,所有资源都放在目录中

> / Meta-INF /资源/
> / resources /
> / static /
> / public /

在您的类路径中添加为静态资源.例如,只需将index.html放入类路径中的/ public /目录中,就不需要你的HomeControlleranymore了

现在到角部

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

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

如果你可以在Github上提供你的项目,我会看看它.

angularjs – 角度简单路由不起作用

猜你在找的Angularjs相关文章