AngularJsでネストされたui-viewを持つまともなURL

Question

AngularはSPA（Single Page Application）です。私は1つのメイン左側のメニューセレクタページを表示することができる適切なソリューションを知りたいと思うし、ユーザーがメニューから何かをクリックすると、右側のビューのdivにあるはずです。

私はそれを持っており、このように実装されています。非常に最初のページ/＃で

$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', 

私Methodeのは、まさにこのように取り組んでいる

...

私は、ログインページを示していますし、彼は＃/メインのみ左のメニューバーにリダイレクトのログインユーザーであるときユーザがプロフィールページを進めると、main.htmlが他のすべてのビュー（profile。、setting.htmlなど）で構成できるように、urlは＃/ main/profileのようになります。

私は何をしたいのですか？ユーザーのログイン時に/ profileとprofileページにリダイレクトする必要があります。左側のメニューバーから設定をクリックすると再び左の列に表示されます。 ouldは/ settingにリダイレクトされますが、この場合、ページ全体をリロードしてmain.htmlの内容を各ページに入れなければなりません。その後、ヘッダーのフッターのような完全な内容を各ページに与えていれば、メニューバー...左の列がそこにあり、ユーザーが/ profile、/ setting、not/main/profile、main/settingのようなまともなURLを楽しむことができるソリューションはありますか？

私はあなたに私の質問があることを願っています。

Answer 1

はい、サイドメニュー、メインメニューに別々のビューを定義して追加したり、それらを再利用することができます。 たとえば、sidemenu.htmlを作成してresources/components/dashboardに入れ、mainとmain.profileの両方の状態で再利用できます。

$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' 
       } 
      } 
     }); 

そしてindex.htmlの中で、あなたはこのようなもの持ってCAND：

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