2017-02-22 7 views
0

私はangularjsとspringフレームワークを持つシンプルなWebページを開発しました。スプリングフレームワークを使ったangularjsルート

私は、ウェブページをSPAとして機能させるために、角度経路を使ってウェブページを作ろうとしました。

ここに私の簡単なメインJSPファイルがあります。クロムの '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> 

私は、ページを更新せずに「ホーム」リンクをクリックしたときに<ng-view>または<div class="ng-view">home.htmlを入れたいが、それは働いていません。

コードの問題点は何ですか?

答えて

1

はまた、home.html/src/main/resources/static/ディレクトリにあることを確認し、それはhref="#!home"

に変更href="#/home"を動作させるために

私は.jsp

するのではなく、Thymeleafで

読むを .htmlを使用することを好むだろう

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を安全にするための文字エンコードによるものです。私はテストしたが、これは大丈夫だった。あなたが私に知らせてくれたら –

関連する問題