HTML5模式

Question

我有一个角度应用程序，通过使用$ stateProvider我配置了几个角度状态。但是当我定位到任何州时，该网址会显示“＃”字符，如：http://localhost:63808/#/login，而不是此网址，我想配置如：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'
    })
});

Answer 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

Answer 2

使用HTML5模式

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

一旦我点击了网址重新加载按钮，它就无法正常工作，找不到错误。

HTML5模式需要重写URL。

来自文档：

HTML5模式

服务器端

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

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

对于在NodeJS和ExpressJS

下运行的角度应用程序

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下运行的角度应用程序

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

Answer 3

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

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

您可以尝试以下内容：

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

如何忽略角度路线中的'＃'字符？

3 个答案:

HTML5模式

服务器端

对于在NodeJS和ExpressJS

对于在Windows上的IIS下运行的角度应用程序