2016-11-28 65 views
0

我有一個角/ Rails應用程序與需要滿足2個模板2頁:角ui.router提供狀態

該國目前有<ui-view></ui-view>在2個不同的頁面上顯示:

  1. http://localhost:3000/employees
  2. http://localhost:3000/employees/help_desk

的問題是,#2,以顯示正確的狀態,用戶需要去http://localhost:3000/employees/help_desk#/help_desk URL。相反,我需要用戶能夠去http://localhost:3000/employees/help_desk和路由器來服務#/ help_desk模板。

我該怎麼做到這一點?

ui.router至今代碼:

.config([ 
'$stateProvider', 
'$urlRouterProvider', 
function($stateProvider, $urlRouterProvider) { 

    //home state 
    $stateProvider 
    .state('home', { 
     url: '/home', 
     templateUrl: 'home/_home.html', 
     controller: 'MainCtrl', 
     resolve: { 
      postPromise: ['posts', function(posts){ 
      var a = posts.getttAll(); 
      return a; 
      }] 
     } 
    }) 

    //help desk state 
    .state('help_desk', { 
     url: '/help_desk', 
     templateUrl: 'help_desk/_help_desk.html', 
     controller: 'HelpDeskCtrl', 
     resolve: { 
     postPromise: ['help_desk', function(help_desk){ 
     var hd = help_desk.getttAll(); 
     return hd; 
     }] 
    } 
    }) 
    $urlRouterProvider.otherwise('home'); 
}]) 

回答

1
  1. 您需要從服務器服務於同一頁面,無論URL的用戶訪問什麼。
  2. 您需要在配置階段通過調用$ location.html5Mode(true)來啓用HTML模式。在html5Mode

更多信息:https://docs.angularjs.org/guide/ $位置

+0

我有2個完全不同的頁面和2個不同的模板。我只是想讓這兩個匹配。帶有家庭模板和員工的員工/帶help_desk模板的help_desk。所以,我對建議1如何工作感到困惑? – HoosierCoder

+0

第一個選項是必需的,這樣當用戶直接輸入url時,就會加載正確的頁面。無論您使用的是什麼URL,您希望從服務器上加載相同的HTML + JS(包括Angular應用程序)。第二個選項告訴angular(ui-router)解析URL並在不使用散列的情況下從中識別狀態。綜上所述:選項一是爲客戶直接輸入網址,選項二爲在網站內導航。你需要做兩個。 – norbertk

0

無論您使用的路由器,就可以後才#符號更改通過URL部分路線。在更改任何零件之前影響應用程序重新加載。

請看一看這個example

請不要看templateUrl - 這被分別裝載。

+0

事情是,我實際上需要在這一點上重新加載頁面。我需要的是如果有人前往/員工顯示家庭模板。如果有人前往/ employees/help_desk顯示help_desk模板。有沒有辦法通過在兩個不同的頁面上區分調用或類似的方式來做到這一點? – HoosierCoder

+0

如果您使用單獨的頁面,這意味着您加載不同的index.html,並且您可以使用不同的腳本。因此,您可以修改路由器配置以使用另一個根路由模板。這樣做是非常尷尬和怪異的... –