Cant giải thích chi tiết tại sao điều này xảy ra nhưng tôi có thể mô tả cho bạn một cách tôi giải quyết vấn đề này ra. Vì vậy, tôi đã sử dụng UrlRewriterFilter cho chương trình phụ trợ SpringMvc của tôi. Cấu hình mô-đun chung góc:
var app = angular.module('ilonaChatGeneralModule',
[
'ui.router'
]);
app.config(function($locationProvider){
$locationProvider.html5Mode(true);
});
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
var home = ['/', {
url: '/',
templateUrl: 'views/userlist.html'
}];
var login = ['login', {
url: '/login',
templateUrl: 'views/login.html'
}];
var privateRoom = ['privateroom', {
url: '/privateroom',
templateUrl: 'views/privateroom.html'
}];
$stateProvider
.state(home)
.state(login)
.state(privateRoom)
;
});
Trang chủ, chỉ mục của tôi.html:
<html ng-app="ilonaChatGeneralModule" ng-controller="ilonaChatGeneralCtrl">
<head>
<base href="/">
...
</head>
<body>
<div>
<div ui-view=""></div>
</div>
</body>
</html>
Đây là giao diện người dùng. Đối với backend tôi đã sử dụng UrlRewriteFilter, bạn có thể lấy nó với sự phụ thuộc maven sau:
<dependency>
<groupId>org.tuckey</groupId>
<artifactId>urlrewritefilter</artifactId>
<version>4.0.3</version>
</dependency>
Tôi đã thêm nó vào SpringMVC WebAppInitializer của tôi theo cách sau:
package com.sbk.config;
import org.springframework.context.ApplicationContext;
import org.springframework.web.context.ContextLoaderListener;
import org.springframework.web.context.support.AnnotationConfigWebApplicationContext;
import org.springframework.web.filter.CharacterEncodingFilter;
import org.springframework.web.servlet.DispatcherServlet;
import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;
import org.tuckey.web.filters.urlrewrite.UrlRewriteFilter;
import javax.servlet.*;
import java.nio.charset.StandardCharsets;
import java.util.EnumSet;
public class WebAppInitializer extends AbstractAnnotationConfigDispatcherServletInitializer {
private static final String URL_REWRITE_FILTER_NAME = "urlRewrite";
private static final String URL_REWRITE_FILTER_MAPPING = "/*";
...
@Override
public void onStartup(ServletContext servletContext) throws ServletException {
super.onStartup(servletContext);
FilterRegistration.Dynamic urlReWrite = servletContext.addFilter(URL_REWRITE_FILTER_NAME, new UrlRewriteFilter());
EnumSet<DispatcherType> urlReWriteDispatcherTypes = EnumSet.of(DispatcherType.REQUEST, DispatcherType.FORWARD);
urlReWrite.addMappingForUrlPatterns(urlReWriteDispatcherTypes, true, URL_REWRITE_FILTER_MAPPING);
}
}
Bộ lọc này đòi hỏi urlrewrite.xml nộp dưới ur WEB-INF thư mục (có vẻ như trong cấu hình nhưng mặc định nơi - ở đây). Nội dung của tập tin này:
<!DOCTYPE urlrewrite
PUBLIC "-//tuckey.org//DTD UrlRewrite 2.6//EN"
"http://www.tuckey.org/res/dtds/urlrewrite2.6.dtd">
<urlrewrite>
<rule>
<from>/login$</from>
<to>index.html</to>
</rule>
<rule>
<from>/privateroom$</from>
<to>index.html</to>
</rule>
</urlrewrite>
Tôi đã không đọc hướng dẫn sử dụng một cách cẩn thận nhưng tôi nghi ngờ ý tưởng đó là khi bạn làm mới trình duyệt ur với http://yourhost:xxxx/privateroom ứng dụng ur cố gắng tìm xem physicaly hiện http://yourhost:xxxx/privateroom. Nhưng vắng mặt của nó. Và khi bạn chuyển hướng nó đến góc trang cơ sở ur sẽ xây dựng liên kết chính xác đến tệp vật lý sử dụng định nghĩa trạng thái của nó. Tôi có thể nhầm lẫn về mặt lý thuyết nhưng nó hoạt động trong thực tế
Về cơ bản giải pháp. Một điều tôi muốn thêm: nếu chương trình phụ trợ của bạn cũng đang phân phát dữ liệu động, ví dụ: một API, bạn muốn tách biệt API khỏi chuyển hướng này, vì vậy bạn phải thêm quy tắc này chỉ khi một tệp phù hợp với yêu cầu không tồn tại và không có tuyến API nào khác được khớp. –
Điểm tốt. Đã cập nhật câu trả lời của tôi. Đối với các API mặc dù, tôi thích chạy chúng từ một url/tên miền riêng biệt. –
Có một ví dụ điển hình về NodeJS phục vụ SPA tại đây: http://stackoverflow.com/questions/20396900/angularjs-routing-in-expressjs – mbokil