2017-02-22 86 views
0

我已經開發了一個簡單的網頁與angularjs和彈簧框架。angularjs路由與彈簧框架

我試圖使用角度路由使網頁,使網頁作爲SPA工作。

這是我簡單的主要jsp文件。當我訪問Chrome上的'http://localhost:8080/test'時會顯示該頁面。

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
<%@ page session="false" contentType="text/html; charset=UTF-8"%> 
<!DOCTYPE html> 
<html> 
<head> 
<title>Home</title> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.min.js"></script> 

<script> 
    angular.module("app", ['ngRoute']) 
     .config(function($routeProvider) { 
      $routeProvider.when("/home", { 
       templateUrl: "home.html", 
       controller: "controller" 
      }) 
     }) 
     .controller("controller", function() { 

     }); 
</script> 
</head> 

<body ng-app="app" ng-controller="controller as main"> 
    <ul> 
     <li><a href="#/home">HOME</a></li> 
    </ul> 

    <ng-view></ng-view> 
    <div ng-view></div> 
</body> 

</html> 

我想把home.html<ng-view><div class="ng-view">當我點擊不刷新頁面的「家」的鏈接,但它不工作。

代碼有什麼問題?

回答

1

爲了得到它的工作,以href="#!home"

變化href="#/home"此外,還要確保home.html是在/src/main/resources/static/目錄

我寧願使用.html與Thymeleaf代替.jsp

Integrating JSP with AngularJS, Is it a concern in real world...Beginer in Angular JS

https://spring.io/blog/2015/08/19/migrating-a-spring-web-mvc-application-from-jsp-to-angularjs

+0

你是一個救星!對我有用。感謝您的回答。 :) – hshan

+0

爲什麼我應該用'#!home'代替?我找到的所有文件都說'#/ home'。 – hshan

+0

這個問題是由於字符編碼使URL html安全。我進行了測試,對於這種情況這很好。如果你發現讓我知道 –