Angular UI-Router 默认状态问题答案

【问题标题】：Angular UI-Router Default State IssueAngular UI-Router 默认状态问题
【发布时间】：2014-10-19 13:49:00
【问题描述】：

我正在尝试设置像这样工作的 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 页面时，它不起作用 - 没有错误，只是没有发生任何事情。

链接如下所示：我的项目

我想我想要做的是定义像“editProject”这样的路由，如果这有意义的话，最终将导致 /index.html -> myProjects.html -> EditForm.html。

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

【问题讨论】：

标签： angularjs routing states

【解决方案1】：

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

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

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

当我们单击在 myProjects.home.html 中呈现的 editProject 链接时，它会将我们带到 editProject 状态，该状态会加载 projectHome.html 页面以及 projectForm.html 的默认视图。

【讨论】：