2

I'm working on a web page that is using Angular, jQuery Mobile, and the jQuery Mobile Angular adapter by tigbro. I have everything up an running and it works great except for one issue and that is if at any point if you refresh the page using the browser's refresh button it will give a 404 error as if it doesn't understand the route anymore. I'm not sure where the issue might be since it gets a little confusing with the two frameworks and the adapter working together and I'm new to all of these technologies.

IE happens to be the only browser this doesn't happen in and the difference seems to be in the url. Here is what it looks like when you browse to a page in IE: http://site.com/SalesManagement/SalesManagementIndex.aspx#!/ViewNotes/4

Here is what it looks like when you browse to the same page in another browser like Chrome: http://site.com/SalesManagement/ViewNotes/4

If you go to the first url in Chrome it will load the page and then rewrite the url to the 2nd one.

Below is my routing configuration:

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' }); 
} ]);

I've read some about html5 mode verse hashbang mode but setting html5 mode to off or on in the configuration just made my routing not work at all. Any help would be much appreciated.

4

1 回答 1

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}}

于 2013-06-20T20:17:12.257 回答