Question

我们都知道Angular是SPA（单页应用程序）。我想知道正确的解决方案，我可以显示一个主左侧菜单选择页面，当用户点击菜单中的任何内容时，它应该在右侧视图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',

我的方法就是这样......

在第一页/＃我正在显示登录页面，当用户登录时，他会重定向到＃/ main，只显示左侧菜单栏，当用户继续使用个人资料页面时，网址变为＃/ main /由于main.html中的ui视图，因此main.html可以包含其中的所有其他视图（profile。，setting.html等）

我想要的是当用户登录时他应该被重定向到/ profile并且配置文件页面将在那里有左列..再次如果用户点击左侧菜单栏中的设置他应该重定向到/设置但是在此case我必须重新加载整个页面，main.html内容将在每个页面中..然后再次有什么指向SPA，如果我给每个页面一个完整的内容，如页眉页脚左菜单栏...是否有任何解决方案左列将在那里，用户可以享受像/ profile，/ setting，而不是/ main / profile，main / setting这样的网址。

我希望你能得到我的问题。

Answer 1

是的，您可以为侧面菜单，主菜单，添加等定义单独的视图并重复使用它们。例如，您可以创建sidemenu.html并将其放在资源/组件/仪表板中，然后将其重新用于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你可以这样：

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

在AngularJs中使用嵌套ui-view的体面Url

1 个答案: