Question

编辑：简而言之问题

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

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

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

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

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取代ಠ_ಠ< / p>

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

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

编辑：我发现当我将 locationProvider 设置为 false 并点击刷新时，网址会变成这个东西，这似乎错了：

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

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

注意缺少＆＃34; /＆＃34;在每个链接的开头，这是捕获，因为，如果你想使用$locationProvider.html5Mode(true)，你必须设置一个<base href="/">来使其工作，现在你必须引用它

简单地说，为了使其正常运行，您必须确保所有链接都以＆＃34; /＆＃34; 符号开头。

像这样：

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

请注意，我使用＆＃34; /＃！/＆＃34;，您可以在位置提供者所在的角度路线中进行设置，如下所示：

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

AngularJS漂亮的网址只能部分地运作

编辑：简而言之问题

1 个答案: