如何忽略角度路径中的“#”字符？答案

【问题标题】：How to ignore '#' character from angular route?如何忽略角度路径中的“#”字符？
【发布时间】：2017-11-21 12:06:24
【问题描述】：

我有一个角度应用程序，通过使用 $stateProvider 我配置了几个角度状态。但是当我定位到任何状态时，url 会出现“#”字符，例如：http://localhost:63808/#/login，而不是我想要配置的这个 url：http://localhost:63808/login。这是我的 app.js 代码。

app.js

'use strict';
var mainApp = angular.module("mainApp", ["ui.router", "ui.bootstrap"]);

mainApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/payment');
$stateProvider
    .state('login', {
        url: '/login',
        templateUrl: 'Dashboard/templates/login/login.html',
        controller: 'loginController'
    })
    .state('payment', {
        url: '/payment',
        templateUrl: 'Dashboard/templates/payment/payment.html',
        controller: 'TransactionsController'
    })
    .state('institute', {
        url: '/institute',
        templateUrl: 'Dashboard/templates/institute.html',
        controller: 'InstituteController'
    })
    .state('pinverification', {
        url: '/pinverification',
        templateUrl: 'Dashboard/templates/PIN/verification.html',
        controller: 'PINVerificationController'
    })
});

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

使用 $locationProvider 配置您的应用：

mainApp.config(function($routeProvider, $locationProvider) {
    $locationProvider.hashPrefix('');
    $locationProvider.html5Mode(true);
    
    // Routes
 });

还有 HTML：

<!DOCTYPE html>
<html>

<head>
  <base href="/">
</head>

hashPrefix 删除 '!'

来源：https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag

【讨论】：

很高兴它可以帮助你:)
内页点击效果很好，但是一旦我点击 url reload 按钮它就不起作用了，没有找到错误。
你说的是浏览器重新加载按钮吗？
如果我将此链接localhost:63808/login 粘贴到浏览器网址，然后输入点击按钮，则无法正常工作。但是如果我localhost:63808 它的工作和未来就像localhost:63808/login。但我想像其他网站一样直接点击网址。
让我们continue this discussion in chat。

【解决方案2】：

使用 HTML5 模式

app.config(function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
});

一旦我点击了 url reload 按钮，它就不起作用了，没有找到错误。

HTML5 模式需要 URL 重写。

来自文档：

HTML5 模式

服务器端

使用此模式需要在服务器端重写 URL，基本上你必须重写所有指向应用程序入口点的链接（例如 index.html）。对于这种情况，要求<base> 标记也很重要，因为它允许 AngularJS 区分作为应用程序基础的 url 部分和应由应用程序处理的路径。

— AngularJS Developer Guide - Using $location (HTML5 Mode Server Side)

适用于在 NodeJS 和 ExpressJS 下运行的 Angular 应用程序

var express = require('express');
var path = require('path');
var router = express.Router();

// serve angular front end files from root path
router.use('/', express.static('app', { redirect: false }));

// rewrite virtual urls to angular app to enable refreshing of internal pages
router.get('*', function (req, res, next) {
    res.sendFile(path.resolve('app/index.html'));
});

module.exports = router;

适用于在 Windows 上的 IIS 下运行的 Angular 应用程序

<rewrite>
  <rules>
    <rule name="AngularJS" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Rewrite" url="/" />
    </rule>
  </rules>
</rewrite>

如需了解更多信息，请参阅AngularJS - Enable HTML5 Mode Page Refresh Without 404 Errors in NodeJS and IIS。

【讨论】：

【解决方案3】：

尝试使用$locationProvider.hashPrefix('')

尝试阅读this article. 很好的解释。

您可以尝试以下方法：

angular.module( 'app', [ ] ).config(function( $locationProvider) {
     $locationProvider.hashPrefix('');
     $locationProvider.html5Mode(true);
})

【讨论】：