Spring Boot ngRoute

我試圖用Spring後端和AngularJS前端製作單頁應用程序。我遵循教程並查找了類似的問題，但ngRoute似乎不適用於Spring後端（我得到它與NodeJS後端一起工作）。Spring Boot ngRoute

的index.html

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"/> 
    <title>Spring Demo</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script> 
    <script src="../static/index.js"></script> 
</head> 

<body ng-app="index" ng-controller="indexController"> 
    <a href="/test">test</a> 
    <div ng-view=""></div> 
</body> 

</html>

的test.html

<div> 
    Template loaded 
</div>

index.js

'use strict'; 

const indexModule = angular.module('index', ['ngRoute']); 

indexModule.controller("indexController", function indexController($scope) { 

}); 

indexModule.config(function($routeProvider) { 
    $routeProvider.when('/test', {templateUrl: 'test.html'}); 
});

SringDemoController.java

package com.springdemo; 

import org.springframework.stereotype.Controller; 
import org.springframework.web.bind.annotation.RequestMapping; 

@Controller 
public class SpringDemoController { 

    @RequestMapping({ "/" }) 
    public String getIndexTemplate() { 
     return "index"; 
    } 

}

當我點擊鏈接並且URL更改爲http://localhost:8080/test

來源

2017-10-21 Philippe

項目結構：https://i.stack.imgur.com/mjrxN.png – Philippe

您尚未將locationProvider配置爲使用HML5模式。所以你的鏈接不是指向你的角度測試路線。它試圖從服務器加載/測試路徑。並且您沒有在服務器上爲此路徑配置任何內容，因此出現404錯誤。如果你的目的是爲了避免HTML5模式，鏈接應該是'test'。閱讀https://docs.angularjs.org/guide/$location –

我已經添加了「$ routeProvider.html5Mode（true）;」。但是，如果我添加@RequestMapping（「/ test」）並返回我的Java控制器中的測試模板，是不是會失敗使用ng-view的目的？這將使它成爲一個多頁面的應用程序。 – Philippe

我得到this error以下是解決方案。

索引頁：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Test title</title> 
</head> 
<body ng-app="TestApp"> 

    <div> 
     <h1>The Index</h1> 
     <ul> 
      <li> 
       <a ng-href="#!/test"> Temp One</a> 
      </li> 
     </ul> 


     <div ng-view=""></div> 
    </div> 

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


<script src="js/config.js"></script> 
<script src="js/controller/main.js"></script> 
<script src="js/controller/test.js"></script> 


</body> 
</html>

路由器配置（其稱爲config.js）

'use strict' 

angular.module('TestApp' , ["ngRoute"]) 
     .config(function($routeProvider){ 

      $routeProvider 
      .when('/' , { 
       templateUrl : "view/main.html", 
       controller : 'MainController', 
       controllerAs : 'main' 
      }) 
      .when('/test' , { 
       templateUrl : "view/test.html", 
       controller : 'TestController', 
       controllerAs : 'test' 
      }) 
      .otherwise({ 
        redirectTo: '/' 
      }); 
     });

而且server-side controller的路線：

package com.testApp; 

import org.springframework.stereotype.Controller; 
import org.springframework.web.bind.annotation.RequestMapping; 

@Controller 
public class ServerController { 

    @RequestMapping(value = "/test") 
    public String getTestTemp() { 
     return "static/test"; 
    } 
}

UPDATE：實際上，我的方法是不需要ServerController。它可以寫成如下

package com.testApp; 

import org.springframework.web.bind.annotation.RequestMapping; 
import org.springframework.web.bind.annotation.RestController; 

@RestController 
@RequestMapping(value = "/test") 
public class ServerController { 


}

所以，如果你在這個控制器寫入任何REST方法，從客戶端和服務器端的終點是/test/{the Name of your endPoint }

下面是項目結構

如果添加更多模板，請確保在客戶端和服務器端創建route

來源

2017-10-21 09:33:18 TheTechGuy

如果您在測試頁上重新加載，頁面是否仍能正常顯示？ – Philippe

是的它的確如此：D – TheTechGuy

你不必做任何事情來使這個問題工作 – TheTechGuy

Spring Boot ngRoute

回答

相關問題