Angular.js html5mode（true）和普通锚href链接？
[英]Angular.js html5mode(true) and normal anchor href links?
问题描述
Okay so the problem is this: 
好的，问题是这样的：
I want to have an URL like this http://www.domain.com/bla not http://www.domain.com/#/bla 我想要一个类似http://www.domain.com/bla的网址，而不是http://www.domain.com/#/bla
And I solved that using html5mode(true). 我使用html5mode（true）解决了这一问题。 Great for me! 对我很好！
But now when user goes to //www.domain.com/bla (for example by typing it directly in address bar) he will be shown nothing because angular just rewrites url upon loading the # url. 但是现在，当用户转到//www.domain.com/bla（例如，直接在地址栏中输入）时，他将不会显示任何内容，因为angular只会在加载＃网址时重写url。 So actually //www.domain.com/bla doesn't exist as url. 因此//url.domain.com/bla实际上并不存在。
My question is, how can I show page //www.domain.com/#/bla when user enters //www.domain.com/bla ?(this has to be done from the back-end, in my case node.js) 我的问题是，当用户输入//www.domain.com/bla时，如何显示//www.domain.com/#/bla页面？（在我的案例中，这必须从后端完成。 js）
I think this has something to do with it //github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode 我认为这与它有关//github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
But this is ui-router, I would like to avoid it. 但这是ui路由器，我想避免它。
2 个解决方案
解决方案1
0 2014-10-11 22:08:04
Use in html head tag base Href set your base URL 在html head标签中使用基准Href设置基准URL
<head>
<base href="/set your base url">
</head>
If you're running your angular app on an apache server you can easily add this rule in an .htaccess file. 如果您要在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>
if node js express use this app js 如果节点js表达使用此应用程序js
$locationProvider.html5Mode(true).hashPrefix('!');`
your node js 您的节点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');
解决方案2
0 2014-10-12 14:49:49
I really don't know how to answer your question without an idea about what your code looks like. 我真的不知道您的代码是什么样，不知道如何回答您的问题。 However, I can post an example of what works for what you want. 但是，我可以发布一个示例，说明适用于您所需的内容。 I would, on the other hand, use Angular's UI-Router instead of ngRouter. 另一方面，我将使用Angular的UI-Router而不是ngRouter。 I find that it is a lot easier to work with. 我发现使用它要容易得多。 For what you want, it is fairly easy to do in ui.router . 对于您想要的东西，在ui.router很容易做到。
HTML: 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'
});
}]);
Of course, you don't need separate controllers, but I am providing one here for you. 当然，您不需要单独的控制器，但是我在这里为您提供一个。 I pulled this example code from a project that I recently completed, so I know that it works. 我从最近完成的项目中提取了此示例代码，因此我知道它可以工作。 You will be able to access your pages using localhost/#/ and localhost/landing , for example. 例如，您将能够使用localhost/#/和localhost/landing访问您的页面。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.