Spring MVC AngularJS路由不起作用[关闭]答案

【问题标题】：Spring MVC AngularJS routing not working [closed]Spring MVC AngularJS路由不起作用[关闭]
【发布时间】：2015-12-17 14:20:18
【问题描述】：

Spring MVC - AngularJS 路由示例不起作用。

我收到404 not found (not found page)。如何解决这个问题？

【问题讨论】：

没有发布代码或任何相关的东西，我们不能问这样的问题。您的路线可能有问题。

标签： java angularjs spring-mvc routing

【解决方案1】：

我不熟悉 Spring 框架，但我可能知道问题出在哪里，因为它只是一个 404 错误。在您的路线templateUrl 中查找相对于索引文件或作为主页启动的文件的html 模板。因此，例如，如果该文件位于父文件夹中，您必须使用 templateUrl: 'views/about.jsp' 提供正确的路径。

【讨论】：

【解决方案2】：

    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ page session="false"%>
<html ng-app="myApp">
<head>
<title>Home</title>
<link rel="stylesheet"
    href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet"
    href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />

<!-- SPELLS -->
<script
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script
    src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script type="text/javascript">
    var myApp = angular.module('myApp', [ 'ngRoute' ]);
    myApp.config(function($routeProvider) {
        $routeProvider.when('/', {
            templateUrl : 'views/home.jsp',
            controller : 'myController'
        }).when('/about', {
            templateUrl : 'views/about.jsp',
            controller : 'aboutController'
        }).when('/contact', {
            templateUrl : 'views/contact.jsp',
            controller : 'contactController'
        });
    });
    myApp.controller('myController', function($scope) {
        $scope.message = 'Everyone come and see how good I look!';
    });
    myApp.controller('aboutController', function($scope) {
        $scope.message = 'Look! I am an about page.';
    });
    myApp.controller('contactController', function($scope) {
        $scope.message = 'Contact us! JK. This is just a demo.';
    });
</script>
</head>
<body ng-controller="myController">
    {{1+1}}
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header"></div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
                <li><a href="#contact"><i class="fa fa-comment"></i>Contact</a></li>
            </ul>
        </div>
    </nav>

    <div id="main">

        <!-- angular templating -->
        <!-- this is where content will be injected -->
        <div ng-view></div>

    </div>

</body>
</html>

【讨论】：

我的路径有问题。谢谢大家。