AngularJS 漂亮的 URL 仅部分起作用答案

【问题标题】：AngularJS pretty URLs does work only partialyAngularJS 漂亮的 URL 仅部分起作用
【发布时间】：2024-03-09 08:45:02
【问题描述】：

编辑：简而言之问题

在使用 hasbang 方法时，向 URL 添加多个参数后，Angular 路由会中断。

我对 AngularJS ui-routing 有疑问，由于某种原因，当我想使用“漂亮的 URL”时，路由只能部分工作，我在这些论坛上查找了许多教程和线程，但我找不到任何解决方案。

我有一个类似这样的应用程序：https://scotch.io/tutorials/angular-routing-using-ui-router，我所做的唯一更改是，我在 index.html 文件的 <head> 中添加了 <base href="/">。

默认情况下它工作正常，但在 url 中总是有 hastag 所以 url 看起来像

http://ag-routing.lc/#/home

但我希望它看起来像这样

http://ag-routing.lc/home

在你开始反对我说这是重复之前，问题来了：

在我查看的每个论坛上，这应该是解决方案，将其粘贴到您的配置中，奇迹就会发生。

$locationProvider.html5Mode(true);

这就是我的 app.js 与 hasbang 代码的样子

// app.js
var routerApp = angular.module('routerApp', ['ui.router']);

routerApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {

$locationProvider.html5Mode(true);

$urlRouterProvider.otherwise('/home');

$stateProvider

// HOME STATES AND NESTED VIEWS ========================================
    .state('home', {
        url: '/home',
        templateUrl: 'partial-home.html'
    })
......

现在 # 不见了，但是如果我刷新页面，我会得到一个奇怪的结果或 404。所以我再次查找解决方案并发现，您必须添加此代码转至 .htaccess (source)

RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]

是的，现在它也适用于刷新和直接链接，但这是 我找不到解决方案的真正问题：

当我点击页面刷新时

http://ag-routing.lc/home

它工作正常，但是当我直接（或通过刷新）页面时

http://ag-routing.lc/home/paragraph

简单地说，第二个“/”会破坏页面，它会停止工作，我不知道为什么，我唯一发现的是，当我在 chrome 中打开控制台时，我真的很奇怪结果如：

app.js:3 Uncaught SyntaxError: Unexpected token <
angular.js:3660 Uncaught Error: [$injector:modulerr] Failed to instantiate   module routerApp due to:
Error: [$injector:nomod] Module 'routerApp' is not available! You either  misspelled the module name or forgot to load it. If registering a module ensure  that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.2.13/$injector/nomod?p0=routerApp
at https://code.angularjs.org/1.2.13/angular.js:78:12
at https://code.angularjs.org/1.2.13/angular.js:1531:17
at ensure (https://code.angularjs.org/1.2.13/angular.js:1456:38)
at module (https://code.angularjs.org/1.2.13/angular.js:1529:14)
at https://code.angularjs.org/1.2.13/angular.js:3632:22
at Array.forEach (native)
at forEach (https://code.angularjs.org/1.2.13/angular.js:304:11)
at loadModules (https://code.angularjs.org/1.2.13/angular.js:3626:5)
at createInjector (https://code.angularjs.org/1.2.13/angular.js:3566:11)
at doBootstrap (https://code.angularjs.org/1.2.13/angular.js:1301:20)
http://errors.angularjs.org/1.2.13/$injector/modulerr?p0=routerApp&p1=Error…trap%20(https%3A%2F%2Fcode.angularjs.org%2F1.2.13%2Fangular.js%3A1301%3A20)

最令人震惊的是，当我在资源中打开 app.js 时，js 代码消失了，它被 index.html 中的 HTML 取代 ಠ_ಠ

对英语不好的任何帮助表示赞赏和抱歉...

顺便说一句，当我使用 ng-route 而不是 ui-route 时，问题仍然存在。

编辑： 我发现当我将 locationProvider 设置为 false 并点击刷新时，url 变成了这个东西，看起来错了：

http://ag-routing.lc/about#/about

【问题讨论】：

你检查过ui-router FAQ的这一部分吗？ github.com/angular-ui/ui-router/wiki/…
另外，您是否在 apache 配置中正确设置了 DocumentRoot 和 Directory？
@M21B8 试图删除基本标签，但它仍然不起作用......是的，我相信 apache 设置正确，我的虚拟主机 DocumentRoot 指向我的应用程序的文件夹。 DocumentRoot "D:\xampp\htdocs\angular\uiRouter" ServerName ag-routing.lc
我相信重写应该在 VirtualHost 声明中。确保配置看起来像这里详述的配置：github.com/angular-ui/ui-router/wiki/…
@M21B8 不幸的是，这也不起作用。

标签： javascript angularjs .htaccess angular-ui-router

【解决方案1】：

经过大量的谷歌搜索和整理，我终于偶然发现了一个答案，这使得这项工作有效。我犯的错误是我的资产和链接使用了绝对路径，这是错误的，您必须使用相对路径，例如：

我的路径是这样设置的：

<!-- index.html file -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<script src="assets/libs/angular.min.js"></script>
<a href="about">About</a>

请注意每个链接开头缺少的“/”，这就是问题所在，因为如果您想使用$locationProvider.html5Mode(true)，您必须设置一个<base href="/"> 才能使其工作，现在您必须参考它。

简单地说，要使其正常工作，您必须确保所有链接都以 "/" 符号开头。

像这样：

<!-- index.html file -->
<link href="/assets/css/bootstrap.min.css" rel="stylesheet">
<script src="/assets/libs/angular.min.js"></script>
<a href="/about">About</a>

要使 hasbang 即使在页面刷新时也能正常工作，您还必须正确设置 .htaccess。

这就是我的 .htaccess 的样子：

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews
    </IfModule>

    RewriteEngine On

    # Redirect Trailing Slashes...
    RewriteRule ^(.*)/$ /$1 [L,R=301]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ /#!/ [L]
</IfModule>

请注意，我使用“/#!/”，您可以在位置提供者所在的角度路线中进行设置，如下所示：

$locationProvider.html5Mode(true).hashPrefix('!');

【讨论】：