在html5模式下使用ng-route重新加載角度頁面不會返回index.html

我想爲我的意思應用使用html5模式。我的角色腳本中的視圖路由器代碼如下。在html5模式下使用ng-route重新加載角度頁面不會返回index.html

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { 

    $routeProvider 
    // enumerate routes 
    // {tempUrl: req to send to express, 
    // cntrl: ng-cntrl to be used} 
    .when('/', { 
     templateUrl: '/home', 
     controller: 'mainController' 
    }) 
    .when('/contact', { 
     templateUrl: '/contact', 
     controller: 'mainController' 
    }) 
    .when('/team', { 
     templateUrl: '/team', 
     controller: 'mainController' 
    }); 

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

我已經把基本的標籤在我的index.html文件的開頭如下：

... 
    <base href="/" /> 
    </head> 
    <body ng-app="mainPage"> 
    <header> 
     <nav class="navbar navbar-static-top" role="navigation"> 
     <div> 
      <div class="navbar navbar-top"> 
       <ul class="nav navbar-nav float-right"> 
        <li ng-class="{ active: isActive('/')}"><a class="link-btn" href="">Home</a></li> 
        <li ng-class="{ active: isActive('/team')}"><a class="link-btn" href="team">Team</a></li> 
        <li ng-class="{ active: isActive('/lessons')}"><a class="link-btn" href="lessons">Lessons</a></li> 
        <li ng-class="{ active: isActive('/media')}"><a 
       </ul> 
      </div> 
     </div> 
    </nav> 
    <div ng-controller="mainController"> 
     <div id="main"> 
     <div class="container-fluid"> 
      <div ng-view></div> 
     </div> 
     </div> 
    </div> 
...

我也加入了此規則，以我的web.config文件：

<?xml version="1.0" encoding="utf-8"?> 
<configuration> 
<system.webServer>  
    <!-- indicates that the server.js file is a Node.js application 
    to be handled by the iisnode module --> 
    <handlers> 
    <add name="iisnode" path="app.js" verb="*" modules="iisnode" /> 
    </handlers> 
    <rewrite> 
    <rules> 
     <clear /> 
     <rule name="app" enabled="true" patternSyntax="ECMAScript" stopProcessing="true"> 
     <match url="iisnode.+" negate="true" /> 
     <conditions logicalGrouping="MatchAll" trackAllCaptures="false" /> 
     <action type="Rewrite" url="app.js" /> 
     </rule> 
     <rule name="Main Rule" enabled="true" stopProcessing="true"> 
     <match url=".*" /> 
     <conditions logicalGrouping="MatchAll"> 
      <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> 
      <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> 
     </conditions> 
     <action type="Rewrite" url="/" /> 
     </rule> 
    </rules> 
    </rewrite> 
</system.webServer>

在我app.js文件：

app.get('/', routes.index); 
app.get('/home', routes.home); 
app.get('/contact', routes.contact); 
app.get('/team', routes.team); 
app.get('/lessons', routes.lessons); 
app.get('/media', routes.media); 
app.get('/signup', routes.signUp); 
app.post('/new', users.new); 
//app.get('*', routes.index); uncommenting the last line causes 
//index.html to render without css, even though my stylseete is being served. 
//this is confusing to me because I do want to always serve the index page

問題是當我導航到像/團隊或/聯繫頁面然後刷新頁面時，只有部分服務沒有樣式。我想提供索引頁面，然後將部分渲染到ng-route元素中。我知道這需要重寫我的節點服務器代碼，並嘗試了幾次重寫而沒有成功。我看過這Reloading the page gives wrong GET request with AngularJS HTML5 mode。我看到有很多關於使用html5模式的問題，但我已經嘗試了很多解決方案而沒有獲得所需的行爲。任何幫助是極大的讚賞。感謝

來源

2016-03-01 GabedlM

，而不是對服務HTML諧音提供快車路由，在角路由器的文件夾添加到一個名爲諧音公共目錄中並加載它們爲靜態資源：

.when('/', { 
     templateUrl: '/partials/home.html', 
     controller: 'mainController' 
    })

現在刪除所有app.get （「\ REQ」，routes.route）語句，並提供一個包羅萬象的索引

app.use(routes.index);

路線現在這一頁將始終服務於指數，而不管所請求的URL的。刷新頁面仍然會用於索引。

index.html中的基本標記是必需的。 web.config中的「主規則」是不必要的。

導航欄中的hrefs應該在它們前面有一個斜線，比如'/ home'而不是'home'。做出這些更改後，所有內容都應按預期工作。

來源

2016-03-04 18:20:29

在html5模式下使用ng-route重新加載角度頁面不會返回index.html

回答

相關問題