有没有更好的方式使用ui.router去了解建筑物的布局？ [英] Is there a better way to go about building layouts using ui.router?

问题描述

我目前使用＆LT; D​​IV NG-包括SRC ='JS /应用/谐音/布局/ header.html中'＆GT;＆LT; / DIV＆GT; 以上只是我的＆LT;格UI的视图＆gt;而采用了棱角分明与Laravel 在我的 index.blade.php 文件。

我特地为母公司状态中的继承 ui.router ，但它似乎没有工作，感到复杂/或也许是布局矫枉过正。我只是想注入一个页眉和页脚。

这是我先前在我企图用ui.router州创建布局喷射系统做的事情。正如你可以看到下面。

 ＆LT;格UI视图=头＆GT;＆LT; / DIV＆GT;
＆LT;格UI的视图＆gt;＆LT; / DIV＆GT;
 

---

  .STATE（'根'，{
    网址：'/'，
    摘要：真实，
    观点：{
        头：{
            templateUrl：JS /应用/谐音/ header.html中
        }
    }，
    数据：{
        requireLogin：假的
    }
}）
.STATE（'root.login'，{
    网址：'/登录'，
    templateUrl：JS /应用/谐音/ login.html的，
    控制器：'LoginCtrl'，
    数据：{
        requireLogin：假的
    }
}）
 

解决方案

您需要更改你的HTML结构，通过名为的意见＆安培;那些将与指定的 templateUrl ＆安培; 控制器从的意见选项的状态。

基本上你home.html的里面你会如头，内容＆放三个已命名的意见; 页脚，根状态设置头＆安培;与controlllers 页脚模板。然后，你的孩子的状态登录将使用绝对州名在这个 @root 因为使用内容@根设置内容视图内容命名视图已经被加载在根状态。

标记

 ＆LT;格UI视图=头＆GT;＆LT; / DIV＆GT;
＆LT;格UI视图=内容＆GT;＆LT; / DIV＆GT;
＆LT;格UI视图=页脚＆GT;＆LT; / DIV＆GT;
 

code

  myApp.config（函数（$ stateProvider，$ urlRouterProvider）{  $ urlRouterProvider.otherwise（'/登录'）;
  $ stateProvider
    .STATE（'根'，{
      摘要：真实，
      网址：'/'，
      // templateUrl：JS /应用/谐音/ home.html做为'，//删除此
      观点：{
        ''：{
          templateUrl：JS /应用/谐音/ home.html的'//添加在这里
        }，
        头：{
          templateUrl：JS /应用/谐音/ header.html中
        }，
        页脚：{
          templateUrl：JS /应用/谐音/ header.html中
        }
      }，
      数据：{
        requireLogin：假的
      }
    }）  .STATE（'root.login'，{
    网址：'登录'，
    观点：{
      内容@根'：{
        templateUrl：JS /应用/谐音/ login.html的，
        控制器：'LoginCtrl'，
      }，
    }，
    数据：{
      requireLogin：假的
    }
  }）
}）;
 

工作Plunkr

I am currently using <div ng-include src="'js/app/partials/layout/header.html'"></div> just above my <div ui-view> in my index.blade.php file while using Angular with Laravel.

I have looked into parent state inheritance in ui.router but it seems to not work, and feels complicated / or perhaps an overkill for layouts. I just want to inject a header and a footer.

This is what I was doing earlier in my attempt to use ui.router states to create a layout injection system. As you can see below.

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

---

.state('root', {
    url: '/',
    abstract: true,
    views: {
        'header': {
            templateUrl: 'js/app/partials/header.html'
        }
    },
    data: {
        requireLogin: false
    }
})
.state('root.login', {
    url: '/login',
    templateUrl: 'js/app/partials/login.html',
    controller: 'LoginCtrl',
    data: {
        requireLogin: false
    }
})

解决方案

You need to change your structure of your html, by making named views & those will be specified with templateUrl & controller from views option of the state.

Basically inside your home.html you would have three named views such as header, content & footer, root state is setting header & footer templates with controlllers. Then your child state login will set the content view by using absolute state name using content@root in this @root because content named view has been loaded inside root state.

Markup

<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>

Code

myApp.config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/login');
  $stateProvider
    .state('root', {
      abstract: true,
      url: '/',
      //templateUrl: 'js/app/partials/home.html',//remove this
      views: {
        '': {
          templateUrl: 'js/app/partials/home.html' //add it here
        },
        'header': {
          templateUrl: 'js/app/partials/header.html'
        },
        'footer': {
          templateUrl: 'js/app/partials/header.html'
        }
      },
      data: {
        requireLogin: false
      }
    })

  .state('root.login', {
    url: 'login',
    views: {
      'content@root': {
        templateUrl: 'js/app/partials/login.html',
        controller: 'LoginCtrl',
      },
    },
    data: {
      requireLogin: false
    }
  })
});

Working Plunkr

这篇关于有没有更好的方式使用ui.router去了解建筑物的布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！