Angular UI-Router默认状态问题

debugcn 发表于 Dev

托比·特雷曼（Toby Tremayne）

我正在尝试设置像这样工作的Angular路线/状态：

（伪代码）

/homepage
   defaultstate: homepartial.html

/projects
    defaultstate: projectHome.html

/projects/editProject
    url: projectForm.html

因此，视图最终将像这样：

Home: 
    index.html (includes site header and navbar)
        main view ---> home-partial.html

myProjects: 
    index.html
        main view ---> projectHome.html
                           main view ---> project-home-partial.html (shows list of projects)

editProject: (clicking on a project on projectHome.html)
    index.html
        main view ---> projectHome.html
                           main view ---> projectForm.html

我正在尝试构建嵌套状态来实现此目的，但是我似乎并没有完全了解它的工作方式。这是我的路由设置：

.config(function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
$urlRouterProvider.otherwise('/');

    $stateProvider
        .state('/', {
            url: '/',
            controller: 'org.mi.novum.controllers.NovumBaseCtrl',
            views: {
                '': {
                    templateUrl: 'app/main/main.html'
                },
                'main@/': {
                    templateUrl: 'app/main/home-partial.html',
                    views: {
                        'myProjects@main@/': {
                            url: '/myProjects',
                            templateUrl: 'app/project/myProjects.html'
                        }
                    }
                }
            }
        })

目前，标准本地路线有效，显示了嵌套有本地部分的索引页。但是，当我单击链接转到myProjects页面时，它不起作用-没有错误，什么也没发生。

链接如下所示：<a class="btn btn-primary btn-lg" role="button" ui-sref=".myProjects">我的项目</a>

我想我想做的是定义诸如“ editProject”之类的路由，如果可以的话，最终将导致/index.html-> myProjects.html-> EditForm.html。

任何方向将不胜感激，包括是否有更好的方法来实现我想要的目标。

托比·特雷曼（Toby Tremayne）

发现了问题-我做错了两件事：

1）我忘记了由angular-fullstack yeoman生成器生成的原始index.html已经包含ui-view指令，并且在尝试从main.html开始移植现有项目时感到困惑。简而言之，我摆脱了main.html，将ui-view指令添加到projectsHome.html上的div中，然后按如下所示设置我的路由。

2）我有时也将“状态”和“视图”混为一谈。正确的概念：状态为EditProject，它将我们带到ProjectHome页面，其子视图设置为“ projectForm.html”。

 $stateProvider
        .state('/', {
            url: '/',
            templateUrl: 'app/main/home-partial.html',
            controller: 'org.mi.novum.controllers.NovumBaseCtrl'
        })
        .state('myProjects', {
            url: '/myProjects',
            views: {
                '': {
                    templateUrl: 'app/project/myProjects.home.html'
                }
            }
        })
        .state('editProject', {
            url: '/myProjects/projectEditor',
            views: {
                '': {
                    templateUrl: 'app/project/projectForm.html'
                }
            }
        });

如您所见，默认情况下我们转到home，它在主视图中包括home部分。然后，当我们单击指向myProjects的链接时，将转到myProjects主页，其中包含myProjects.home.html部分作为默认子视图。

当我们单击myProjects.home.html中呈现的editProject链接时，它将带我们进入editProject状态，该状态将使用projectForm.html的默认视图加载projectHome.html页面。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-8

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章