Question

我正在开发一个使用Angular，jQuery Mobile和tigbro的jQuery Mobile Angular适配器的网页。我把所有东西都运行起来，除了一个问题之外它很有效，如果你在任何时候使用浏览器的刷新按钮刷新页面，它会产生404错误，好像它不再理解路由一样。我不确定问题出在哪里，因为它与两个框架和适配器协同工作有点混乱，我是所有这些技术的新手。

IE恰好是唯一没有发生的浏览器，差异似乎在网址中。以下是浏览IE中的页面时的样子： http://site.com/SalesManagement/SalesManagementIndex.aspx#!/ViewNotes/4

以下是您在Chrome等其他浏览器中浏览同一页面时的样子： http://site.com/SalesManagement/ViewNotes/4

如果您转到Chrome中的第一个网址，则会加载该网页，然后将该网址重写为第二个网址。

以下是我的路由配置：

var SalesManagementApp = angular.module('SalesManagementApp', [])

SalesManagementApp.config(['$routeProvider', '$compileProvider', function ($routeProvider, $compileProvider) {
$routeProvider
    .when('/Search', { templateUrl: 'Views/GrowerSearchView.aspx' })
    .when('/SearchResults', { templateUrl: 'Views/GrowerResultsView.aspx' })
    .when('/ViewNotes/:growerIndexKey', { templateUrl: 'Views/NotesHistoryView.aspx' })
    .when('/EditNote/:growerIndexKey/:noteIndexKey', { templateUrl: 'Views/UpsertNoteView.aspx' })
    .when('/AddNote/:growerIndexKey', { templateUrl: 'Views/UpsertNoteView.aspx' })
    .when('/', { templateUrl: 'Views/GrowerSearchView.aspx' })
    .otherwise({ templateUrl: 'Views/GrowerSearchView.aspx' }); 
} ]);

我已经阅读了一些有关html5模式和hashbang模式的内容，但在配置中将html5模式设置为off或on只是让我的路由根本不起作用。任何帮助将不胜感激。

Answer 1

我想通过适配器的github网站上的类似问题来解决这个问题：https://github.com/opitzconsulting/jquery-mobile-angular-adapter/issues/163

解决此问题的方法是以角度禁用html5Mode，并使用＃字符添加前缀。由于您不再使用html5历史记录API，这会使您的网址更加丑陋，但在我的情况下无关紧要。您可以选择指定一个哈希前缀（默认情况下它似乎是！）但我将我的设置为空字符串。我找不到任何文档告诉我为什么这有用，但重要的是知道前缀是什么，这样你才能正确设置你的链接。

以下是我更新的路由配置。注意我现在注入了$ locationProvider。

var SalesManagementApp = angular.module('SalesManagementApp', [])

SalesManagementApp.config(['$routeProvider', '$compileProvider', '$locationProvider', function ($routeProvider, $compileProvider, $locationProvider) {

$locationProvider.html5Mode(false).hashPrefix("");

$routeProvider
    .when('/Search', { templateUrl: 'Views/GrowerSearchView.aspx' })
    .when('/SearchResults', { templateUrl: 'Views/GrowerResultsView.aspx' })
    .when('/ViewNotes/:growerIndexKey', { templateUrl: 'Views/NotesHistoryView.aspx' })
    .when('/EditNote/:growerIndexKey/:noteIndexKey', { templateUrl: 'Views/UpsertNoteView.aspx' })
    .when('/AddNote/:growerIndexKey', { templateUrl: 'Views/UpsertNoteView.aspx' })
    .when('/', { templateUrl: 'Views/GrowerSearchView.aspx' })
    .otherwise({ templateUrl: 'Views/GrowerSearchView.aspx' }); // jQuery Mobile seems to ignore the / and just use .otherwise.

$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);

if (!localStorage.SessionInfo)
    window.location = '/Login.aspx';

} ]);

我的链接现在看起来像：＃/ ViewNotes / {{growerIndexKey}}

使用Angular，jQM和Adapter时无法刷新页面

1 个答案: