Angular.js app：消除#！来自我的单个帖子的 URL，同时保持 slug

Question

我正在开发一个小型 AngularJS 博客应用程序（我使用的框架版本是 1.7.8）。

我已经设法从我自己制作的 API 中提取并显示 posts。

我试图从我的单身 post 的 URL 中消除 #!，同时保留 slug。

示例：

我有 http://examplesite.eu/#!/europes-most-beautiful-castles，我试图获得 http://examplesite.eu/europes-most-beautiful-castles。

AngularJS 文档中的这个解决方案不起作用，因为它完全消除了 slug，我想保留它，用于 SEO 目的：

appModule.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);

我的 app.js 文件：

angular.module('app', [
    'ngRoute',
    'app.controllers',
    'ngSanitize'
]).config(['$routeProvider', function($routeProvider){
    $routeProvider.when('/', {
        templateUrl: 'templates/posts.html',
        controller: 'PostsController'
    }).when('/:slug', {
        templateUrl: 'templates/singlepost.html',
        controller: 'SinglePostController'
    }).when('/page/:id', {
        templateUrl: 'templates/page.html',
        controller: 'PageController'
    }).otherwise({
        redirectTo: '/'
    });
}]);

有什么替代方法可以让鼻涕虫留在 post URL 中？

Answer 1

您需要使用 $locationProvider.html5mode 切换到历史记录 api 以便 angular 可以更直接地操作 URL 而不是使用哈希。

您可以在文档中阅读更多相关信息 Hashbang and HTML5 Modes

Answer 2

我已经使用 $locationProvider 清理了 URL 服务：

我的 app.js 文件：

angular.module('app', [
    'ngRoute',
    'app.controllers',
    'ngSanitize'
]).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
    $routeProvider.when('/', {
        templateUrl: 'templates/posts.html',
        controller: 'PostsController'
    }).when('/:slug', {
        templateUrl: 'templates/singlepost.html',
        controller: 'SinglePostController'
    }).when('/page/:id', {
        templateUrl: 'templates/page.html',
        controller: 'PageController'
    }).otherwise({
        redirectTo: '/'
    })

  $locationProvider.html5Mode({
    enabled: true,
    requireBase: true
  });
}]);

在 index.html 我添加了 <base href="/">:

<title>{{siteTitle}} | {{tagline}}</title>
<base href="/"> 
<meta charset="utf-8" />

Answer 3

试试下面的代码：

import { Location } from '@angular/common';
this.location.replaceState(this.location.path().replace('#!/', '');

Angular.js app：消除#！来自我的单个帖子的 URL，同时保持 slug

Angular.js app: eliminate #! from the URLs of my single posts while keeping the slug

javascript

routes

angularjs

ngroute