Angular.js html5mode（true）和普通錨點href鏈接？

好了，所以這個問題是這樣的：Angular.js html5mode（true）和普通錨點href鏈接？

我想有這樣http://www.domain.com/bla沒有http://www.domain.com/#/bla

的URL我解決了使用html5mode（真）。非常適合我！

但現在當用戶進入（直接在地址欄鍵入它爲例）//www.domain.com/bla他將沒有顯示，因爲角只是URL重寫，在加載＃網址。所以實際上//www.domain.com/bla不存在爲url。

我的問題是，我該怎麼讓頁面//www.domain.com/#/bla當用戶進入//www.domain.com/bla？（這必須從後端進行，在我的情況node.js）

我認爲這與它有關//github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server -to-工作與-html5mode

但這是UI的路由器，我想，以避免它。

來源

2014-10-11 Dusan J.

你在使用UI.router嗎？ – 2014-10-11 22:30:52

我正在使用角度路由器。 – 2014-10-12 08:16:17

你可以發佈你使用的代碼嗎？ HTML和角度。 – 2014-10-12 12:25:32

格式使用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表示使用該應用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');

來源

2014-10-11 22:08:04

我正在使用nodejs作爲後端。至於頭部的基礎標籤，我在所有頁面上使用相同的頭部。我應該完全放入href屬性中。 www.domain.com或/ url-of-this-particular-page – 2014-10-12 08:15:38

set un base tag href ='/ domain'and try – 2014-10-12 08:17:41

它不適用於。我在http：// localhost：3000 /上託管它，並且我想要的頁面位於/ register – 2014-10-12 08:27:58

我真的不知道該怎麼回答你的問題沒有什麼想法你代碼看起來像。不過，我可以發佈一個適用於你想要的東西的例子。另一方面，我會使用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訪問您的頁面。

來源

2014-10-12 14:49:49

Angular.js html5mode（true）和普通錨點href鏈接？

回答

相關問題