Question

在我的角度页面中，我使用了$locationProvider。但它在我的网页上没有工作。我这样在我的控制台中出错了，HTML5模式下的 $ location需要一个标签！。所以我添加一个<base href="/" />，这也不适用于我的角度页面。这里我提到了我的目录结构和我的代码。

这里也是sample Project link。帮我解决这个问题。

我的目录结构

 iwa (root directory)
  > js
      > lib
         -> angular.js
         -> angular.route.js
      -> app.js
  > views
      -> home.html
      -> about.html
 -> index.html

的index.html

 <!DOCTYPE html>
 <html ng-app="inQueueWeb">
 <head lang="en">
     <meta charset="UTF-8">
     <script src="js/lib/angular.js"></script>
     <script src="js/lib/angular-route.js"></script>
  </head>
 <body>
     <div ng-view></div>
 </body>
     <script src="js/app.js"></script>
 </html>

app.js

  var iwa = angular.module('inQueueWeb', ['ngRoute']);

   iwa.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider) {
$routeProvider
   .when("/", {templateUrl: 'views/home.html'})
   .when("/rest", {templateUrl: 'views/about.html'});
$locationProvider.html5Mode(true);
}]);

我也试过这些

$locationProvider.html5Mode({enable: true, requireBase: false});

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

Answer 1

你走在正确的轨道上。您必须在应用的$locationProvider.html5Mode(true)方法中添加.config()，然后在HTML头中添加<base href="/">。我想你已经做到了。

出现了什么问题：使用$locationProvider.html5Mode(true)时，无需使用hashbang（/#mypage）网址。一个URL只是/mypage，没有哈希。您需要更新views/templates/header.html中的链接以适应此目的。

我已更新：

您的app.js添加$locationProvider.html5Mode(true)。
您的index.html添加<base href="/">和
您的views/templates/header.html调整锚链接。

我希望这有用！你可以download an archive with the adjusted files here。

Answer 2

在头标记下方添加

<base href="/">

然后在您的路由器下，在.config

中添加$ locationProvider

.config(function($routeProvider, $urlRouterProvider, $locationProvider) {

在所有状态下添加

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

$urlRouterProvider.rule(function($injector, $location) {
    var slashHashRegex,
        matches,
        path = $location.url();

    // check to see if the path already has a slash where it should be
    if (path[path.length - 1] === '/' || path.indexOf('/?') > -1) {
        return path.substring(0, path.length - 1);
    }

    // if there is a trailing slash *and* there is a hash, remove the last slash so the route will correctly fire
    slashHashRegex = /\/(#[^\/]*)$/;
    matches = path.match(slashHashRegex);
    if (1 < matches.length) {
        return path.replace(matches[0], matches[1]);
    }
});

如果您还没有.htaccess文件，请创建一个.htaccess文件，并添加此文件（假设您使用的是index.html）

<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
    RewriteRule (.*) index.html [L]
</ifModule>

希望这有帮助！

Answer 3

我不确定这会对你有所帮助，但是

!DOCTYPE html>

应该是

<!DOCTYPE html>

或者在发帖时你做错了吗？

Answer 4

首先，我在index.html中缺少基本标记？您可能已将其替换为：

$locationProvider.html5Mode({enable: true, requireBase: false});

不幸的是，你在'启用'中犯了一个小错字。哪个应该'启用'（结尾为'd'）。因此，修复拼写错误或添加基本标记并使用以下内容更改$ locationProvider行

$locationProvider.html5Mode(true);

我认为这样可以解决问题。

除此之外，你必须将脚本放在＆lt;身体＆gt;＆lt; / body＆gt;标签。否则它是无效的HTML。

$ locationProvider不在我的Angular页面中工作

4 个答案: