我正在尝试在AngularJS中创建所谓的“SEO友好”网址。
在我的script.js中我有路由:
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.html5Mode(true);
when('/blog', {
templateUrl: 'blog.html',
controller: 'BlogController'
}).
when('/page/ideas', {
templateUrl: 'ideas.html',
controller: 'IdeasController'
}).
otherwise({
templateUrl: 'home.html'
});
}]);
app.controller("BlogController", function($scope) {
$scope.title = 'Blog';
});
app.controller("IdeasController", function($scope) {
$scope.title = 'Ideas';
});
要从URL中删除#,我将启用html5模式:
$routeProvider.html5Mode(true);
但是,这会导致以下错误:
由于以下原因导致无法实例化模块exampleApp: TypeError:$ routeProvider.html5Mode不是函数
有没有人能解决这个问题?这意味着内容不会因为它而显示在视图中。
修改:对于任何想知道的人,工作代码是:
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/blog', {
templateUrl: 'blog.html',
controller: 'BlogController'
}).
when('/page/ideas', {
templateUrl: 'ideas.html',
controller: 'IdeasController'
}).
otherwise({
templateUrl: 'home.html'
});
$locationProvider.html5Mode(true);
}]);
答案 0 :(得分:7)
html5mode
提供商可以使用 $locationProvider
方法。
您应该在配置阶段包含$locationProvider
,以便在config block&然后为html5mode
免费网址启用#
。
<强>代码强>
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
//$routerProvider code here
$locationProvider.html5Mode(true);
}]);
此外,您必须添加<base href="/"
&gt; index.html
页面上的标记