Question

我是Angular的新手，我正在学习js，但是我试图用Spring Boot在前端运行Angular。默认情况下，Spring正常呈现我的index.html页面，但是当我尝试转到/ login页面时，我收到了404 not found错误。我已经尝试了几乎我能想到的每个网址组合的模板网址，但没有运气。因为我是Angular的新手，我无法确定这是一个Spring配置问题还是更简单的问题。

Angular controller app.js：

      var wishingWell = angular.module('wishingWell', [ 'ngRoute' ]);

            wishingWell.config(function($routeProvider, $httpProvider) {

                $routeProvider.when('/', {
                    templateUrl : 'static/home.html',
                    controller : 'home'
                }).when('/login', {
                    templateUrl : 'static/login.html',
                    controller : 'navigation'
                }).otherwise('/');

                $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';

            });

            wishingWell.controller('home', function($scope, $http) {
                $http.get('/resource/').success(function(data) {
                    $scope.greeting = data;
                })
            });

            wishingWell.controller('navigation', function() {});

的index.html：

            <!doctype html>
            <html ng-app="wishingWell">
            <head>
                <meta charset="UTF-8"/>
                <meta name="viewport"
                      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
                <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
                <link rel="stylesheet" href="/css/normalize.css"/>
                <link rel="stylesheet" href="/css/main.css"/>

                <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
                <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>
                <script   src="https://code.jquery.com/jquery-3.1.1.js"   integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="   crossorigin="anonymous"></script>
                <script src="/javascript/Angular/app.js"></script>

                <title>Wishing Well</title>
            </head>

            <body ng-controller="home">
                    <nav class="nav">
                        <ul class="navback">
                            <li>
                                <a class="active" href="/">The Well</a>
                            </li>
                            <li>
                                <a href="/profile" >Profile</a>
                            </li>
                            <li>
                                <a href="/sign-up">Sign Up</a>
                            </li>
                            <li>
                                <a href="/login">Log In</a>
                            </li>
                            <li>
                                <a href="/logout">Sign Out</a>
                            </li>
                        </ul>
                    </nav>

                    <div ng-view></div>

            </body>
            </html>

文件夹结构：

有什么想法吗？

Answer 1

它与Spring无关，因为点击登录链接是在客户端呈现而不是在服务器端呈现（不是ajax调用或页面提交）。

我在这里可以看到一些问题：

- ＆GT;在index.html中，angular-route的链接不正确

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>

应该是

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>

你忘记了https：

- ＆GT;您需要在锚标记中使用＃/ login，否则您的页面将被重定向到不存在的.login

 <a href="#/login">Log In</a>

- ＆gt; index.html和login.html位于同一目录中，因此在app.js模板中，网址应为login.html而不是static / login.html

你可以看到它在这里工作 https://plnkr.co/edit/YpAm5FVG2ME7s3EeAigY?p=preview

注意：我已将index.html移到静态文件夹之外，以使其与index.html中的plunker和更新的app.js路径一起使用。

如果仍然无法正常工作，请按f12（如果使用chrome）后置控制台输出。

Answer 2

这些页面无法加载的根本原因（@coder响应发现表面级别错误）是Spring安全性阻止了文件路径。我将模板添加到蚂蚁匹配器中并且它可以工作。这个文件是我发现的地方;通过它时容易跳过的东西：https://spring.io/guides/tutorials/spring-security-and-angular-js/

                @Override
                protected void configure(HttpSecurity http) throws Exception {
                    http
                            .authorizeRequests()
                                .antMatchers("/index.html", "/sign-up.html","/login.html", "/").permitAll()
                                .anyRequest().authenticated()
                                .and()
                                .csrf().disable();

                }

SpringBoot + Angular ng-view问题

2 个答案: