CODEWITHSUNDEEP
javascripthtmlangularjs
Pedro Miguel Pimienta Morales
Pedro Miguel Pimienta Morales

Reputation: 453

Angular.js - How to load different menu

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

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

enter image description here

Appreciate a clear explanation.

Upvotes: 2

Views: 183

Answers (1)

Appeiron
Appeiron

Reputation: 1061

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:

  1. Create Service that will have getCurrentUserStatus() that should acquire from loaded data about user his status in your system

  2. 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()];
},
...

  3. 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.

Upvotes: 3

Related Questions