使用 Angular、jQM 和 Adapter 时无法刷新页面答案

【问题标题】：Unable to refresh page when using Angular, jQM, and Adapter使用 Angular、jQM 和 Adapter 时无法刷新页面
【发布时间】：2013-06-13 15:05:15
【问题描述】：

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

IE 恰好是唯一不会发生这种情况的浏览器，不同之处似乎在于 url。当您在 IE 中浏览到页面时，它的外观如下： http://site.com/SalesManagement/SalesManagementIndex.aspx#!/ViewNotes/4

当您在其他浏览器（例如 Chrome）中浏览到同一页面时，会出现以下情况： http://site.com/SalesManagement/ViewNotes/4

如果您转到 Chrome 中的第一个 url，它将加载页面，然后将 url 重写为第二个。

下面是我的路由配置：

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 模式设置为关闭或打开只会让我的路由根本不起作用。任何帮助将不胜感激。

【问题讨论】：

标签： angularjs routes jquery-mobile

【解决方案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}}

【讨论】：