Question

好的，问题是：

我希望有一个类似http://www.domain.com/bla而不是http://www.domain.com/#/bla

的网址

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

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

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

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

但这是ui-router，我想避免它。

Answer 1

在html head标签库中使用 Href设置您的基本网址

<head>

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

如果您在Apache服务器上运行角度应用程序，则可以在.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表达使用此 app 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>

Angular：

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 个答案: