AngularJs中具有嵌套ui视图的不错的URL

Question

We all know Angular is a SPA (Single Page Application). i want to know the proper solution where i can show the one main left side menu selector page and when a user click anything from menu it should be in right side view div.

i have it and implemented like this.

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

my methode is exactly working like this...

at the very first page /# i am showing login page and when a user is login he redirects to #/main where only left menu bar is showing, and when user proceed with profile page the url become like #/main/profile because of ui view in main.html so that main.html can consist all other view in it (profile.,setting.html etc)

what i want is when a user login he should be redirected to /profile and profile page will be there with left column.. again if a user click on setting from left menu bar he should be redirect to /setting but in this case i have to reload the whole page and main.html content will be in each page.. then again what is the point to SPA if i am giving each page a full content like header footer left menu bar... is there any solution where the left column will be there and user can enjoy a decent url like /profile, /setting, and not /main/profile, main/setting.

i hope you got my question.

Answer 1

Yes, you can define separate views for the side menu, main menu, adds etc and reuse them. For example you can create sidemenu.html and put it in resources/components/dashboard and then reuse it for both main and main.profile states.

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

And in index.html you cand have something like this:

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