AngularJS，ui路由器，嵌套狀態

我正在使用ui路由器構建應用程序的大綱。我已經定義了這些國家，它似乎有效，但我不禁覺得在最佳實踐方面可能會有更好的方式。AngularJS，ui路由器，嵌套狀態

我的狀態：

「主」是一個頁眉，頁腳一個抽象的狀態，中間內容區域。
'main.home'是默認出現的。內容文件'home.tpl.html'是一種帶有srefs到應用程序其他區域的啓動頁面，如'main.wizard.step1'。
'main.wizard'是一個表示多步信息收集嚮導的抽象狀態。
「main.wizard.step1」，「main.wizard.step2」是在嚮導

步驟是什麼，我懷疑是我使用的「@」，「若干意見」爲對象的值和「」。這看起來合理嗎？還是你會做別的事情？

$urlRouterProvider.otherwise('/'); 

var app = { 
    name: 'main', 
    abstract: true, 
    url: '', 
    views: { 
     'header': { 
      templateUrl: 'header.tpl.html' 
     }, 
     'footer': { 
      templateUrl: 'footer.tpl.html' 
     } 
    } 
}; 

var home = { 
    name: 'main.home', 
    url: '/', 
    views: { 
     "@": { 
      templateUrl: 'home/home.tpl.html' 
     } 
    } 
}; 

var wizard = { 
    name: 'main.wizard', 
    abstract: true, 
    url: '/wizard', 
    views: { 
     "@": { 
      templateUrl: 'wizard/wizard.tpl.html' 
     } 
    } 
}; 

var step1 = { 
    name: 'main.wizard.step1', 
    url: '/step1', 
    views: { 
     "": { 
      templateUrl: 'wizard/step1.tpl.html' 
     } 
    } 
}; 

/** repeat similarly for step2, step3 & step 4 **/ 

$stateProvider.state(app); 
$stateProvider.state(home); 
$stateProvider.state(wizard).state(step1).state(step2).state(step3).state(step4);

來源

2015-04-16 eflat

'@'在視圖模板定義中的含義將被注入到通常爲index.html的根狀態的ui視圖中。如果您希望向導進入你的主頁你的中部地區，你應該加入這樣的事情您的index.html：

<ui-view name='content'>Optional placeholder text</ui-view>

並在視圖的定義，你應該這樣做

var wizard = { 
name: 'main.wizard', 
abstract: true, 
url: '/wizard', 
views: { 
    "@content": { 
     templateUrl: 'wizard/wizard.tpl.html' 
    } 
} 
};

實際上，您可以將@放在@content中，因爲main是嚮導的父級，您不必以絕對方式解決它。在任何情況下，如果您想要在嚮導中執行步驟（當然），請不要在嚮導虛擬狀態中放置任何視圖。有你的步驟子州有自己的看法和目標[email protected]。我沒有看到你需要爲你的嚮導單獨的視圖包裝器（也許如果你想做「y步驟x」或進度條）。希望它有幫助。

來源

2015-04-16 23:12:42

謝謝，這幫助我更好地理解事情。 – eflat

你很好。但是你可以改進。下面是顯示我如何完成它的代碼，我已經從UI-Router Guide中的示例應用程序採取了這種方法。

var states = [ 
     { name: 'hello', url: '/loginnn', component: 'loginComponent' }, 
     { name: 'home', url: '/hommm', component: 'homeComponent' }, 

     { 
      name: 'home.dumm1', 
      url: '', 
      component: 'dummyComponent', 

     }, 


     { 
      name: 'home.dumm2', 
      url: '/dumm1', 
      component: 'dummyComponent1', 
     }, 


     { 
      name : 'home.dashboard', 
      url: '/dashboard', 
      component: 'dashboardComponent', 
     } 

     ] 

     // Loop over the state definitions and register them 
     states.forEach(function(state) { 
     $stateProvider.state(state); 
     }); 
    });

來源

2017-03-07 07:45:51 Vivek

AngularJS，ui路由器，嵌套狀態

回答

相關問題