在所有模块中使用 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

您应该与父母一起扩展您的'page1' 状态。该父级可以包含所有定义，可以共享，并且其他子状态将从中受益：

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，它不会影响网址和名称）：

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（不是从父级继承的）。它还将所有内容注入到 index.html 中（感谢父根）。而且，它确实针对父级未命名视图...

更多细节：

• Nested States & Nested Views
• Multiple Named Views

与工作中的 plunker 类似的问题：

• Angular UI Router - Nested States with multiple layouts