Angular.js - 如何加載不同的菜單

我開始jQuery的應用程序遷移到角度，但它讓我有點複雜。我需要知道在登錄任何用戶時是否有人可以幫我作爲路由和加載控制器。有兩種類型的用戶Angular.js - 如何加載不同的菜單

學生
教師

每個人都有不同的菜單，這反過來又具有不同的HTML頁面。根據用戶輸入的角色，然後加載特定的菜單。

使用jQuery加載事件，並更改了div內更改的內容。我想知道如何用角度執行此過程。

的index.html

<html> 
    <head> Files ... </head> 
    <body> 
    <div id="container"></div> 
    </body> 
</html>

學生menu.html

<div> 
    <div>option-1</div> 
    <div>option-2</div> 
    <div>option-3</div> 
    <div>option-N</div> 
</div>

學生的頁面

option-1.html 
option-2.html 
option-3.html 
option-N.html

教師menu.html

<div> 
    <div>option-1</div> 
    <div>option-2</div> 
    <div>option-3</div> 
    <div>option-N</div> 
</div>

教師的頁面

option-1.html 
option-2.html 
option-3.html 
option-N.html

欣賞一個明確的解釋。

來源

2015-11-03 Pedro Miguel Pimienta Morales

請考慮閱讀關於在您的驚人的應用程序包括ui-router和學習templateProvider用法。

只要你有上面的東西做了所有你需要的是：

創建Service將有getCurrentUserStatus()應該從有關用戶加載的數據採集根據情況配置他在你的系統

狀態你的孩子views: { 'menu': { ... } }與

//somewhere above 
const TEMP = { 
    user: 'path/to/file.tpl.html', 
    admin: 'path/to/admin.tpl.html' 
} 

//somewhere in view configuretion 
..., 
templateProvider (AuthService) { 
    return TEMP[AuthService.getCurrentUserStatus()]; 
}, 
...

創建的選擇完全相同的方法中，所有其他網頁需要的模板。

P.S.這允許您擴展可變模板的列表，除非您的想象空白：D

P.P.S. Noobs的方式 - 很多ng-include與ng-if在每個視圖將根據觀衆而改變。

來源

2015-11-03 20:53:21 Appeiron

'templateProvider'是確定非靜態模板的很好的功能 – Appeiron

謝謝你的回答，非常清晰和簡潔，我知道mj推薦給ajax請求angula.js爲使用用戶名和密碼，必須加載相應的菜單。 –

只需確保從後端獲取該信息一次：在應用程序啓動時將其存儲在服務中以進行任意點訪問。 – Appeiron

Angular.js - 如何加載不同的菜單

回答

相關問題