SpringBoot + Angular ng-view问题

我是Angular的新手，我很喜欢学习js，但我试图在Spring Boot的前端运行Angular。默认情况下，Spring通常会呈现我的index.html页面，但当我尝试访问/ login页面时，出现404未找到错误。我已经尝试了几乎所有可以为模板url创建的url组合，但没有运气。因为我是Angular的新手，所以我无法确定这是Spring配置问题还是更简单的问题。SpringBoot + Angular ng-view问题

角控制器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>

文件夹结构：

任何想法？

来源

2016-09-28 Trevor Bye

这个404错误与angular没有任何关系。你能告诉我们你的url（localhost ...）和你的默认控制器吗？ –

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

我在这里可以看到几个问题：

- > index.html中链接角路线是不正确

<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：

- >您需要使用＃/登录锚定标记，否则您的网页将被重定向到.login不存在

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

- > index.html，然后login.html的是在同一个目录中，所以在app.js模板URL应该是login.html的，而不是静态/ login.html的

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

注意：我已将index.html移动到静态文件夹之外，以使其与index.html中的plunker和更新的app.js路径相应地工作。

如果它仍然不起作用，请按f12（如果使用chrome）后控制台输出。

来源

2016-09-28 06:17:08 coder

我修正了你建议的所有内容，但是出于某种原因它不会将home.html注入到ng-view中。以下是控制台输出：Uncaught Error：[$ injector：modulerr]它抛出：throw $ injectorMinErr（'modulerr'，“由于：\ n {1}”，无法实例化模块{0}。 –

我认为有一些文件路径正在进行，我将app.js脚本直接粘贴到索引中。html，注入器错误消失，但现在我得到一个[$ compile：tpload]无法加载模板，所以看起来我的路径没有任何工作正常。 –

为什么这些页面不会加载的根本原因（@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(); 

       }

来源

2016-09-28 16:55:18

SpringBoot + Angular ng-view问题

回答

相关问题