Ui 路由器 AngularJs 嵌套状态和嵌套视图正确

Ui router AngularJs Nested states and Nested views correct way

本文关键字：嵌套 视图 状态 路由器 AngularJs Ui      更新时间：2023-09-26

这是存储库：https://github.com/vipul-verma/LetsLearnAngular

这是实时取景： https://rawgit.com/vipul-verma/LetsLearnAngular/master/index.html

解释：基本模板。

主页链接将加载 partials/home.html。

关于链接将加载 partials/about.html 和 partials/about-sublevel.html。

问题：

这里 partials/about-sublevel.html 是关于页面的子级别，因此可以说它是关于页面或关于页面的嵌套视图/状态的一部分。但是如果你看到索引页，它有两个视图'viewA'、'viewB'。

"viewA"根据链接加载 partials/home.html 或 partials/about.html。

"

viewB"仅在单击"关于"链接时加载 partials/about-sublevel.html。

问题：

有没有办法将 partials/about-sublevel.html 页面与索引页面分开并在 about 内部加载.html这样我就不必将标签放在索引页面中作为<div ui-view="viewB"></div>.

正确的方式"viewB"应该加载到关于.html因为它是关于页面的一部分，当我单击关于链接时，默认情况下会显示 partials/about.html 和 partials/about-sublevel.html。

正确的方法是什么，在这种情况下的最佳实践。 在应用程序中将执行哪些操作.js才能实现此目的。请仅使用上面的 git 存储库给出答案。请不要在不使用存储库中的代码的情况下给出虚拟答案。谢谢

我想我不完全理解你的问题，但最佳做法是每个州都有一个模板。

下面是我如何使用嵌套视图的示例：

 var root = "/app/Views/";
    $stateProvider
        .state('/', {
            url: '/',
            templateUrl: root + 'Index.html'
        })
        .state('pas', {
            url: '/pas',
            templateUrl: root + 'Index.html'
        })
        .state('pas.calculate', {
            url: '/calculate',
            templateUrl: root + 'Calculate.html'
        })
        .state('pas.calculate.form', {
            url: '/form',
            templateUrl: root + 'Calculate/Form.html'
        })
        .state('pas.calculate.overview', {
            url: '/overview',
            templateUrl: root + 'Calculate/Overview.html'
        })
        .state('pas.contact', {
            url: '/contact',
            templateUrl: root + 'Contact.html'
        })
    $stateProvider
        .state("otherwise", {
            url: "*path",
            templateUrl: root + "Index.html"
        });
相关文章：