Question

我正在尝试设置像这样工作的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'
                        }
                    }
                }
            }
        })

当标准归属路由工作时，显示索引页面，其中包含home-partial。但是，当我点击链接转到myProjects页面时，它不起作用 - 没有错误，只是没有发生任何事情。

链接看起来像这样：＆lt; a class =“btn btn-primary btn-lg”role =“button”ui-sref =“。myProjects”＆gt; My Projects＆lt; / a＆gt;

我想我要做的是定义像“editProject”这样的路线，最终会导致/index.html - ＆gt; myProjects.html - ＆gt; EditForm.html，如果这是有道理的。

任何方向都会受到高度赞赏，包括是否有更好的方法来实现我想要的目标。

Answer 1

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

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

2）我有时也会混淆＃34;州和＃34;和＆＃34;观点＆＃34;。 正确的概念：状态是EditProject，它将我们带到ProjectHome页面，子视图设置为＆＃34; projectForm.html＆＃34;。

 $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，其中包括主页部分的主视图。然后，当我们单击指向myProjects的链接时，我们将转到myProjects主页，其中myProjects.home.html部分包含在默认子视图中。

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

Angular UI-Router默认状态问题

1 个答案: