Angular UI Router - 具有多种布局的嵌套状态 [英] Angular UI Router - Nested States with multiple layouts

查看：22
本文介绍了Angular UI Router - 具有多种布局的嵌套状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想要多个布局(1-col、2-col、3-col)，我想根据所需的布局切换不同的路线.

我目前有一个默认使用特定布局的根状态，然后在该布局中包含用于页眉、页脚、侧边栏等部分的命名 ui-view 指令.

我只是想知道是否可以更改嵌套状态的布局，因为它目前不起作用并且控制台或 linter 中没有出现错误.

我目前在浏览器中根本没有任何输出，这让我认为我实施的方法是错误的，因为所有路由都不是从路由状态继承的.

代码如下:

My-module.js

'use strict';angular.module('my-module', ['ngResource', 'ui.router'])//应用程序的路由..config(function ($stateProvider, $urlRouterProvider) {$stateProvider.state('root', {网址:'',意见:{'布局': {templateUrl: 'partials/layout/1-column.html'},'标题':{templateUrl: 'partials/layout/sections/header.html'},页脚":{templateUrl: 'partials/layout/sections/footer.html'}}}).state('root.home', {网址:'/'}).state('root.signup', {网址:'/注册'，意见:{'步骤面包屑':{templateUrl: 'partials/signup/step-breadcrumb.html'}}});$urlRouterProvider.otherwise('/');});

Index.html

<html class="no-js" ng-app="my-module"><头><meta charset="utf-8"><title>我的测试应用</title><meta name="description" content=""><meta name="viewport" content="width=device-width"><!-- build:css({.tmp,app}) 样式/main.css --><link rel="stylesheet" href="styles/main.css"><!-- endbuild --><!-- build:js scripts/modernizr.js --><script src="bower_components/modernizr/modernizr.js"></script><!-- endbuild --><身体><div ui-view="布局">

<!-- build:js({app,.tmp}) scripts/vendor.js --><script src="bower_components/angular/angular.js"></script><script src="bower_components/angular-resource/angular-resource.js"></script><script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script><!-- endbuild --><script src="scripts/config.js"></script><!-- build:js({app,.tmp}) scripts/main.js --><script src="scripts/my-module.js"></script><!-- 注入:部分 --><!-- endinject --><!-- endbuild --></html>

1-column.html

<!-- 页眉--><div ui-view="header">
<!--/页眉--><!-- 状态面包屑(可选)--><div ui-view="step-breadcrumb">

<!--/状态面包屑 --><!-- 页面容器--><div class="page-container"><!-- 主要内容--><div ui-view="main-content">

<!--/主要内容-->

<!--/页面容器--><!-- 页脚--><div ui-view="页脚">

<!--/页脚 -->

感谢帮助

解决方案

虽然没有 plunker 展示您的示例，但我将与您分享一个:工作布局示例.请观察它以了解我将在此处尝试解释的内容

如果我们的 root 状态应该是唯一的根状态，注入到 index.html 中，我们确实需要一些不同的定义:

对于 index.html

//index.html<身体><div ui-view="布局">

我们需要这样的语法:

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

这是什么:'header@root'?这是绝对的命名.在这里检查:

<块引用>

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

其他状态定义也是如此.因为 'root.signup' 有直接的父级 'root'，现有的语法将起作用

.state('root.signup', {网址:'/注册'，意见:{'step-breadcrumb': {//按原样工作...

但是我们可以使用绝对命名，它也可以工作

.state('root.signup', {网址:'/注册'，意见:{'step-breadcrumb@root': {//绝对命名...

因为这就是它背后的工作方式.

请查看布局示例以了解更多详情

I want to have multiple layouts (1-col, 2-col, 3-col) which I want to switch out for different routes based on the layout needed.

I currently have a root state which defaults to using a certain layout and then within that layout contains named ui-view directives for sections such as the header, footer, sidebar etc.

I was just wondering if it is possible to change out the layout for nested states, as it currently does not work and no errors within the console or linter are appearing.

I am currently getting no output in the browser at all which makes me think I have implemented the approach wrong, as all routes aren't inheriting from the route state.

Here's the code:

My-module.js

'use strict';

angular.module('my-module', ['ngResource', 'ui.router'])
  // Routing for the app.
  .config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('root', {
        url: '',
        views: {
          'layout': {
            templateUrl: 'partials/layout/1-column.html'
          },
          'header': {
            templateUrl: 'partials/layout/sections/header.html'
          },
          'footer': {
            templateUrl: 'partials/layout/sections/footer.html'
          }
        }
      })
      .state('root.home', {
        url: '/'
      })
      .state('root.signup', {
        url: '/signup',
        views: {
          'step-breadcrumb': {
            templateUrl: 'partials/signup/step-breadcrumb.html'
          }
        }
      })
      ;

    $urlRouterProvider.otherwise('/');
  })
  ;

Index.html

<!doctype html>
<html class="no-js" ng-app="my-module">
  <head>
    <meta charset="utf-8">
    <title>My Test App</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <!-- build:css({.tmp,app}) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->

    <!-- build:js scripts/modernizr.js -->
    <script src="bower_components/modernizr/modernizr.js"></script>
    <!-- endbuild -->
  </head>
  <body>

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

    <!-- build:js({app,.tmp}) scripts/vendor.js -->
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <!-- endbuild -->

    <script src="scripts/config.js"></script>

    <!-- build:js({app,.tmp}) scripts/main.js -->
    <script src="scripts/my-module.js"></script>
    <!-- inject:partials -->
    <!-- endinject -->
    <!-- endbuild -->

  </body>
</html>

1-column.html

<div class="one-column">

  <!-- page header -->
  <div ui-view="header">
  </div>
  <!-- / page header -->

  <!-- state breadcrumb (optional) -->
  <div ui-view="step-breadcrumb">
  </div>
  <!-- / state breadcrumb -->

  <!-- page-container -->
  <div class="page-container">

    <!-- main content -->
    <div ui-view="main-content">
    </div>
    <!-- / main content -->

  </div>
  <!-- / page-container -->

  <!-- page footer -->
  <div ui-view="footer">
  </div>
  <!-- / page footer -->

</div>

Appreciate the help

解决方案

While there is no plunker showing your example, I will share one with you: working layout example. Please observe it to see in action what I will try to explain here

If our root state should be the only root state, injected into index.html, we do need a bit different defintion:

So for index.html

// index.html
<body>
    <div ui-view="layout">
    </div>
</body>

we would need this syntax:

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

What is this: 'header@root'? it is absolute naming. Check it here:

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.

The same goes for other states definitions. Because the 'root.signup' has direct parent 'root', the existing syntax would be working

.state('root.signup', {
    url: '/signup',
    views: {
      'step-breadcrumb': { // working AS IS
      ...

But we could use absolute naming and it would work as well

.state('root.signup', {
    url: '/signup',
    views: {
      'step-breadcrumb@root': { // absolute naming
      ...

because this is how it works behind anyway.

Please, observe the layout example for more details

这篇关于Angular UI Router - 具有多种布局的嵌套状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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