angularjs 1.3.16 路由与 html5mode,url 正在更新但内容未更新
angularjs 1.3.16 routing with html5mode, url is updating but content not updating
我们使用 AngularJS 版本 1.3.16 和 nodeJS 作为后端,ng-route 用于 angular 路由。工作代码由#!作为节点的 URL 分隔符和 angular.
示例 URLs:
/store/1234/#!/department/produce
/store/1234/#!/department/produce/类别/水果
NodeJS 路由代码:
app.get('/store/:storeid', ctrl.storeView);
Angular路由代码:
$routeProvider.when('/department/:deptIndex', {
controller: 'CartController',
resolve: {
// I will cause a 1 second delay
delay: function ($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 1000);
return delay.promise;
}
}
}).when('/department/:deptIndex/category/:catIndex', {
controller: 'CartController',
resolve: {
// I will cause a 1 second delay
delay: function ($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 1000);
return delay.promise;
}
}
});
$locationProvider.html5Mode(false).hashPrefix('!');
为了使 URL 的 SEO 友好且可抓取,我们必须从 URL 中删除 hashbang。
因此,当我们尝试启用 html5 模式时,问题就出现了。 angular 路由在启用该模式后不起作用。
每个路由都应该有一个模板或一个模板 URL ,你的 HTML 应该有 ng-view 来查看路由内容
你在 index.html 中设置基数 url 了吗?
<head>
<base href="/">
</head>
您还需要将 html5mode 设置为 true 并删除 hashPrefix
$locationProvider.html5Mode(true);
我将基本 href 更新为节点服务器后,我的路由开始工作 url:
<head>
<base href='/store/'+store.storeCode>
</head>
我还更新了我的 angular 路由 url,前缀为商店代码,例如:
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.when('/:storeid/department/:deptIndex', {
//my routing code
});
我们使用 AngularJS 版本 1.3.16 和 nodeJS 作为后端,ng-route 用于 angular 路由。工作代码由#!作为节点的 URL 分隔符和 angular.
示例 URLs: /store/1234/#!/department/produce /store/1234/#!/department/produce/类别/水果
NodeJS 路由代码:
app.get('/store/:storeid', ctrl.storeView);
Angular路由代码:
$routeProvider.when('/department/:deptIndex', {
controller: 'CartController',
resolve: {
// I will cause a 1 second delay
delay: function ($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 1000);
return delay.promise;
}
}
}).when('/department/:deptIndex/category/:catIndex', {
controller: 'CartController',
resolve: {
// I will cause a 1 second delay
delay: function ($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 1000);
return delay.promise;
}
}
});
$locationProvider.html5Mode(false).hashPrefix('!');
为了使 URL 的 SEO 友好且可抓取,我们必须从 URL 中删除 hashbang。 因此,当我们尝试启用 html5 模式时,问题就出现了。 angular 路由在启用该模式后不起作用。
每个路由都应该有一个模板或一个模板 URL ,你的 HTML 应该有 ng-view 来查看路由内容
你在 index.html 中设置基数 url 了吗?
<head>
<base href="/">
</head>
您还需要将 html5mode 设置为 true 并删除 hashPrefix
$locationProvider.html5Mode(true);
我将基本 href 更新为节点服务器后,我的路由开始工作 url:
<head>
<base href='/store/'+store.storeCode>
</head>
我还更新了我的 angular 路由 url,前缀为商店代码,例如:
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.when('/:storeid/department/:deptIndex', {
//my routing code
});