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.

Appeiron · Accepted Answer · 2015-11-03 20:53:21Z

3

Please consider reading about including ui-router in your amazing application and learn about templateProviderusage.

As soon as you done with above things all you need is:

Create Service that will have getCurrentUserStatus() 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.

P.S. This allows you to expand list of variable templates unless your imagination will empty :D

P.P.S. Noobs way - lot of ng-include with ng-if on every view that will be changed depending on viewer.

answered Nov 3, 2015 at 20:53

Appeiron

1,0617 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Appeiron Over a year ago

templateProvider is great functionality to determinate non-static templates

Pedro Miguel Pimienta Morales Over a year ago

Thank you for your answer , very clear and concise , I would know that m recomndarias to ajax requests angula.js as using a username and password that must load the corresponding menu .

Appeiron Over a year ago

Just make sure to acquire that information from back-end only once: at application start and store it in service for any-point access.

Collectives™ on Stack Overflow

Angular.js - How to load different menu

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related