将 ui-router 用于“main"布局? [英] Using ui-router for "main" layout?

查看：20
本文介绍了将 ui-router 用于“main"布局?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用 ui-router 视图为我的页面创建主布局"，但我似乎无法使其正常工作(各种错误、未调用控制器、未加载模板).

<html ng-app="应用程序"><头>...<身体><header ui-view="header"></标题><部分 ui-view="导航"></节><部分 ui-view="内容"></节</html>

这个想法是有一个状态代表整个站点的根"状态，提供导航和标题模板以及根控制器".每个其他状态将其内容加载到内容"视图中，而不会影响其他状态.

$stateProvider.state(索引"，{网址:/"，控制器:App.IndexController"，控制器为:vm"，意见:{"header@index" : { templateUrl: "app/main/header.html" }//导航等}

应用加载时没有任何错误，但模板和控制器永远不会被调用.我错过了什么吗?

我还看到很多人提供了一个单独的布局"视图，该视图被加载到一个未命名的视图中(主要在 标签上)，但我认为这是无用的主要 index.html 文件已经是我的布局.或者:有没有更好的方法来实现我想要的?

解决方案

有答案 Angular UI Router - Nested States with multiple layouts 使用显示布局的工作 plunker:http://plnkr.co/edit/I0BJ09BxR7nG9kZDeEIv?p=预览

重点是 index.html 和

然后根状态将其自己的模板(布局)注入到 ui-view="layout" 并注入到布局视图中.

首先是布局模板:

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

这里是状​​态定义

$stateProvider.state('root', {网址:'',意见:{'布局': {templateUrl: 'partials/layout/1-column.html'},'标题@root':{templateUrl: 'partials/layout/sections/header.html'},'页脚@root':{templateUrl: 'partials/layout/sections/footer.html'}}})

它是如何工作的?我们使用的是绝对和相对目标名称.

查看名称 - 相对名称与绝对名称

<块引用>

在幕后，每个视图都被分配了一个绝对名称，该名称遵循 viewname@statename 方案，其中 viewname 是视图指令中使用的名称，状态名称是状态的绝对名称，例如联系方式.您还可以选择以绝对语法编写视图名称.

例如，前面的例子也可以写成:

 .state('报告',{意见:{'过滤器@':{}，'表数据@':{}，'图@':{}}})

I'm trying to create the 'main layout' for my page using ui-router views, but I can't seem to get it working right (various errors, controllers not getting called, templates not getting loaded).

<!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>

The idea is to have a state representing the "root" state for the whole site providing templates for navigation and header as well as a "root controller". Every other state loads it's content into the "content" view without affecting the others.

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

The app loads without any errors, but the templates as well as the controller never get invoked. Did I miss something?

I also saw that many people provide a separate "layout" view that get's loaded into an unnamed view (mostly on the <body> tag), but I consider this useless as the main index.html file is already my layout. Or: Is there a better way to achieve what I want?

解决方案

There is an answer Angular UI Router - Nested States with multiple layouts with a working plunker showing layout: http://plnkr.co/edit/I0BJ09BxR7nG9kZDeEIv?p=preview

The point is that there is index.html with

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

And the root state then injects into that ui-view="layout" its own template (layout) and also injects into layout views.

So firstly the layout template:

<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>

And here is state def

$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'
      }
    }
  })

And how it is working? we are using the absolute and relative target names.

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"布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆