Angular.js html5mode（true）和普通锚href链接？

Question

好的，问题是这样的：

我想要一个类似http://www.domain.com/bla的网址，而不是http://www.domain.com/#/bla

我使用html5mode（true）解决了这一问题。 对我很好！

但是现在，当用户转到//www.domain.com/bla（例如，直接在地址栏中输入）时，他将不会显示任何内容，因为angular只会在加载＃网址时重写url。 因此//url.domain.com/bla实际上并不存在。

我的问题是，当用户输入//www.domain.com/bla时，如何显示//www.domain.com/#/bla页面？（在我的案例中，这必须从后端完成。 js）

我认为这与它有关//github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

但这是ui路由器，我想避免它。

Answer 1

在html head标签中使用基准Href设置基准URL

<head>

  <base href="/set your base url">
</head>

如果您要在apache服务器上运行angular应用，则可以轻松地将此规则添加到.htaccess文件中。

# Apache .htaccess

# angularjs pushstate (history) support:
# See http://www.josscrowcroft.com/2012/code/htaccess-for-html5-history-pushstate-url-routing/
<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
    RewriteCond %{REQUEST_URI} !.*\.(css¦js|html|png) #Add extra extensions needed.
    RewriteRule (.*) index.html [L]
</ifModule>

如果节点js表达使用此应用程序js

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

您的节点js

var express = require('express'),
    app = express();

//initialize static server that will spit out contents of public folder
app.use('/', express.static(__dirname + '/public'));

app.listen(9823); //the express server will start on port 9823
console.log('started');

Answer 2

我真的不知道您的代码是什么样，不知道如何回答您的问题。 但是，我可以发布一个示例，说明适用于您所需的内容。 另一方面，我将使用Angular的UI-Router而不是ngRouter。 我发现使用它要容易得多。 对于您想要的东西，在ui.router很容易做到。

HTML：

 <body ng-app="someApp">
   <nav class="whatever"> 
    <ul class='nav navbar-nav'>
      <li><a ui-sref='new_page'>Whatever</a></li>
    </ul>
   </nav>
   <div ui-view></div>  
 </body>

角度：

var someApp = angular.module('SomeApp', ['ui.router']);

someApp.config(['$stateProvider', '$locationProvider', function($stateProvider, $locationProvider)  {
 $locationProvider.html5Mode(true);

$stateProvider.state('landing', {
  url: '/',
  controller: 'Landing',
  templateUrl: '/templates/landing.html'
 });

$stateProvider.state('new_page', {
  url: '/',
  controller: 'NewPage',
  templateUrl: '/templates/new_page.html'
 });
}]);

当然，您不需要单独的控制器，但是我在这里为您提供一个。 我从最近完成的项目中提取了此示例代码，因此我知道它可以工作。 例如，您将能够使用localhost/#/和localhost/landing访问您的页面。

Angular.js html5mode（true）和普通锚href链接？

问题描述

2 个解决方案

解决方案1
0 2014-10-11 22:08:04

解决方案2
0 2014-10-12 14:49:49

Angular.js html5mode（true）和普通锚href链接？

问题描述

2 个解决方案

解决方案1 0 2014-10-11 22:08:04

解决方案2 0 2014-10-12 14:49:49

解决方案1
0 2014-10-11 22:08:04

解决方案2
0 2014-10-12 14:49:49