스프링 부트 ngRoute

스프링 백 엔드와 AngularJS 프런트 엔드를 사용하여 단일 페이지 응용 프로그램을 만들려고합니다. 튜토리얼을 따라 봤는데 비슷한 질문을했지만 ngRoute은 Spring 백 엔드에서 작동하지 않는 것 같습니다 (NodeJS 백 엔드에서 작동하도록했습니다).스프링 부트 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

HML5 모드를 사용하도록 locationProvider를 구성하지 않았습니다. 따라서 귀하의 링크가 귀하의 각도 테스트 경로를 가리키고 있지 않습니다. 서버에서/test 경로를로드하려고 시도합니다. 그리고 당신은 서버상의이 경로를 위해 아무 것도 설정하지 않았기 때문에 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 : 실제로, 방법 i 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

답변

관련 문제