在所有模块中使用 stateProvider 视图

Question

我想在所有模块中使用 stateprovider 视图模板..

所以，在 index.html 我有这个：

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

那么我的配置是这样的：

$urlRouterProvider.otherwise('/');

$stateProvider.
    state("home",
    {
        url: "/",
        views: {
            "": {
                templateUrl: "main.html"
            },
            "nav": {
                templateUrl: "modules/nav/nav.html"
            },
            "footer": {
                templateUrl: "modules/footer/footer.html"
            }
        }
});

这对于根路由和默认路由来说工作得很好，但是如果我导航到 localhost:8000/page1，例如，导航和页脚在这个配置中是不可见的：

$stateProvider.
    state("page1",
    {
        url: "/page1",
        views: {
            "": {
                templateUrl: "modules/page1/page1.html"
            }
        }
    });

当我将带有模板的导航和页脚视图添加到配置时，它当然可以正常工作。但是我不想将这些相同的视图和 templateUrls 添加到我的所有页面和模块中。我可以以某种方式定义它在我在默认路由的主要配置中定义的所有地方都有效吗？

或者我必须使用 ng-include 吗？因为使用 ng-include 可以正常工作，但我认为使用 ui-view :)

会更好

有人对此有解决方案吗？

非常感谢

Answer 1

您应该使用 parent 扩展您的 'page1' 状态。 parent 可以包含所有定义，可以共享，其他 child 州将从中获利：

state("root",
{
    // this state will not use any url, it is just a wrapper
    // url: "/",
    views: {
        // place hoder for child
        "": {
            template: '<div ui-view=""></div>'
        },
        "nav": {
            templateUrl: "modules/nav/nav.html"
        },
        "footer": {
            templateUrl: "modules/footer/footer.html"
        }
    }
  ...

现在任何州都可以使用parent（它不会影响url这两个名字，如果我们使用设置parent）：

state("page1",
{
    parent: "root"
    url: "/page1",
    // no need to define views, if we target the unnamed in the parent
    templateUrl: "modules/page1/page1.html"
});

所以，现在，"page1" 状态有自己的 url（不是继承自 parent）。它还将所有内容注入 index.html（感谢 parent root）。而且，它确实针对 parent 未命名视图...

更多详情：

与一个正在工作的 plunker 的类似问题：

Angular UI Router - Nested States with multiple layouts

在所有模块中使用 stateProvider 视图

Use stateProvider views in all modules

angularjs

angular-ui-router

angular-ui