Is there a better way to go about building layouts

问题:

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

回答1:

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

回答2:

I Think you use this.

`.state('header', {
   abstract : true,
   templateUrl: 'js/app/partials/header.html'

})
.state('home', {
            url: '/',
            templateUrl: 'js/app/partials/home.html',
            parent : 'header',
            data: {
                requireLogin: false
            }
        })
        .state('login', {
            url: '/login',
            parent : 'header',
            templateUrl: 'js/app/partials/login.html',
            controller: 'LoginCtrl',
            data: {
                requireLogin: false
            }
        })`