anständige Url mit verschachtelten u-View in AngularJs

Question

Wir alle wissen, Angular ist ein SPA (Single Page Application). Ich möchte die richtige Lösung kennen, wo ich die eine Seite der linken Seite des Hauptmenüs zeigen kann und wenn ein Benutzer irgendwas aus dem Menü anklickt, sollte es in der rechten Seitenansicht div sein.

ich habe es und implementiert so.

$stateProvider 
     .state('home', { 
      url: '/', 
      cache: false, 
      templateUrl : 'resources/components/home/home.html', 
      controller : 'homeController', 

     }).state('main', { 
      url: '/main', 
      templateUrl : 'resources/components/dashboard/main.html', 
      controller : 'dashboardController', 


     }).state('main.profile', { 
      url: '/profile', 
      templateUrl : 'resources/components/clinicprofile/profile.html', 
      controller : 'profileController', 

meine Methode ist genau so arbeiten ...

auf der ersten Seite/# Ich zeige Login-Seite und wenn ein Benutzer Login er #/main umleitet, wo nur linke Menüleiste zeigt, und wenn der Benutzer mit der Profilseite fortfährt, wird die URL wie #/main/profile wegen ui view in main.html, so dass main.html aus allen anderen Ansichten bestehen kann (profile, setting.html etc)

was ich will ist, wenn ein Benutzer login er sollte umgeleitet werden/Profil und Profilseite wird dort mit der linken Spalte .. wieder wenn ein Benutzer klicken auf Einstellung von links Menüleiste er sh Sollte ich nach/setting umleiten, aber in diesem Fall muss ich die ganze Seite neu laden und main.html Inhalt wird in jeder Seite sein .. dann wieder was ist der Punkt zu SPA, wenn ich jeder Seite einen vollständigen Inhalt wie Header Fußzeile links geben Menüleiste ... gibt es eine Lösung, bei der die linke Spalte angezeigt wird und der Benutzer eine anständige URL wie/profile,/setting und nicht/main/profile, main/setting genießen kann.

ich hoffe, du hast meine Frage.

Answer 1

Ja, Sie können separate Ansichten für das Seitenmenü, Hauptmenü, Hinzufügen usw. definieren und sie erneut verwenden. Zum Beispiel können Sie seitenmenu.html erstellen und in Ressourcen/Komponenten/Dashboard einfügen und es dann für beide Main und Main.profile Staaten wiederverwenden.

$stateProvider 
     .state('home', { 
      url: '/', 
      cache: false, 
      templateUrl : 'resources/components/home/home.html', 
      controller : 'homeController', 

     }).state('main', { 
      url: '/main', 
      views: { 
       '': { 
        templateUrl : 'resources/components/dashboard/main.html', 
        controller : 'dashboardController', 
       }, 

       'nav@main': { 
        templateUrl : 'resources/components/dashboard/sidemenu.html' 
       } 
      } 

     }).state('profile', { 
      url: '/profile', 
      views: { 
       '': { 
        templateUrl : 'resources/components/clinicprofile/profile.html', 
        controller : 'profileController', 
       }, 

       'nav@main.profile': { 
        templateUrl : 'resources/components/dashboard/sidemenu.html' 
       } 
      } 
     }); 

Und in index.html cand Sie so etwas wie dieses:

<div ui-view></div> 
<div ui-view="nav"></div>