Angular.js - How to load different menu
Question
I 'm starting jquery migrating an application to angular, but it has made me a bit complex. I need to know if someone could help me as routing and load controllers, when login any user. There are two types of users
- Students
- Teachers
Each has a different menu , which in turn has different html pages. Depending on the role the user to enter then load the specific menu.
Using the jQuery load event , and changed the content which changes within a div . I would like to know how to perform this process with angular .
index.html
<html>
<head> Files ... </head>
<body>
<div id="container"></div>
</body>
</html>
student-menu.html
<div>
<div>option-1</div>
<div>option-2</div>
<div>option-3</div>
<div>option-N</div>
</div>
students-pages
option-1.html
option-2.html
option-3.html
option-N.html
teacher-menu.html
<div>
<div>option-1</div>
<div>option-2</div>
<div>option-3</div>
<div>option-N</div>
</div>
teachers-pages
option-1.html
option-2.html
option-3.html
option-N.html
Appreciate a clear explanation.
1 answers
solution1
2 ACCPTED 2015-11-03 20:53:21
Please consider reading about including ui-router in your amazing application and learn about templateProvider usage.
As soon as you done with above things all you need is:
- Create
Servicethat will havegetCurrentUserStatus()that should acquire from loaded data about user his status in your system Depending on status configure your child
views: { 'menu': { ... } }with//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()]; }, ...Create all another pages with totally same approach of choosing needed template.
PS This allows you to expand list of variable templates unless your imagination will empty :D
PPS Noobs way - lot of ng-include with ng-if on every view that will be changed depending on viewer.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.