使用 ui-router 作为 "main" 布局？

Question

我正在尝试使用 ui-router 视图为我的页面创建 'main layout'，但我似乎无法使其正常工作（各种错误，控制器未被调用，模板未被调用正在加载）。

<!DOCTYPE html>
<html ng-app="App">
    <head>
        ...
    </head>
    <body>
        <header ui-view="header">

        </header>

        <section ui-view="navigation">

        </section>

        <section ui-view="content">

        </section
    </body>
</html>

想法是让整个站点的状态代表 "root" 状态，提供导航模板和 header 以及 "root controller"。每个其他状态都将其内容加载到 "content" 视图中，而不影响其他状态。

$stateProvider
    .state("index", {
        url: "/",
        controller: "App.IndexController",
        controllerAs: "vm",
        views: {
            "header@index" : { templateUrl: "app/main/header.html" }
            // nav etc.
        }

应用程序加载没有任何错误，但模板和控制器从未被调用。我错过了什么吗？

我还看到很多人提供了一个单独的 "layout" 视图，它被加载到一个未命名的视图中（主要在 <body> 标签上），但我认为这没有用，因为主要 index.html 文件已经是我的布局。或者：有没有更好的方法可以实现我想要的？

Answer 1

有答案Angular UI Router - Nested States with multiple layouts with a working plunker showing layout: http://plnkr.co/edit/I0BJ09BxR7nG9kZDeEIv?p=preview

重点是有index.html和

<div ui-view="layout"></div>

然后根状态将它自己的模板（布局）注入到 ui-view="layout" 中，并且还注入到布局视图中。

所以首先是布局模板：

<div>
  <section class="top">
    <div ui-view="top"></div>
  </section>
  
  <section class="middle">
    
    <section class="left">
      <div ui-view="left"></div>
    </section>
    
    <section class="main">
      <div ui-view="main"></div>
    </section>
  
  </section>
</div>

这是状态定义

$stateProvider
  .state('root', {
    url: '',
    views: {
      'layout': {
        templateUrl: 'partials/layout/1-column.html'
      },
      'header@root': {
        templateUrl: 'partials/layout/sections/header.html'
      },
      'footer@root': {
        templateUrl: 'partials/layout/sections/footer.html'
      }
    }
  })

它是如何工作的？我们正在使用绝对和相对目标名称。

View Names - Relative vs. Absolute Names

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

For example, the previous example could also be written as:

  .state('report',{
    views: {
      'filters@': { },
      'tabledata@': { },
      'graph@': { }
    }
  })

使用 ui-router 作为 "main" 布局？

Using ui-router for "main" layout?

html

javascript

angularjs

angular-ui-router

View Names - Relative vs. Absolute Names