Angular 1.4 UI Router: sub-routes?

Question

I have a site where some pages have a header, content, footer while others might have a different setup. Each "section" of the site has its own module.

Update

Here is a plunker of the current state of things:
https://plnkr.co/edit/G5CdPPtULVeI1Lfa9Rjg?p=preview

You can see the home state loads, and has 3 views that load a header and footer (from their module folders) and homepage content. I am trying to add a link to load the next set of views into the original ui-view on the index page to shows the "sample" page with its header, content, and footer views.

Update 2

A plunker with the solution as provided below:
https://plnkr.co/edit/WQHN5ehCDhKo4mkhMbgU?p=preview

Original question:

So I am refactoring my app to have one ui-view at the root that loads a sub-route in each module. I got this to work with the default route, which loads the "home" module into the main view:

angular.module('app').config(function ($stateProvider) {
$stateProvider.state('otherwise', {
  url: '*path',
  template: '',
  controller: function ($state) {
    $state.go('home.page');
  }
});

});

And the home.routes.js file is like so:

angular.module('app').config(function ($stateProvider) {
$stateProvider.state('home', {
  url: '/home',
  templateUrl: 'modules/home/home.html',
  abstract: true,
  controller: 'HomeController as home',
  data: {
    pageTitle: 'Home Page'
  }
})
.state('home.page', {
  views: {
    header: {
      templateUrl: 'modules/header/header.html'
     },
    content: {
      templateUrl: 'modules/home/home.content.html'
     },
    footer: {
      templateUrl: 'modules/footer/footer.html'
     }
   }
  });
});

It works as expected. The abstract route loads home.html, which is simply my named views:

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

But I am having a problem linking to a second module from the home page. I created a module "sample" with the exact same setup as above, literally duplicated and renamed the files and routes to "sample" from "home".

On the home.content.html page, I am trying to create a link to the second module "sample" with a ui-sref="sample">Sample Section</a> but it errors out "could not transition to the abstract state 'sample'".

I also tried a ui-sref="sample.page">Sample Section</a> which does not throw any console errors but goes nowhere. I thought I had this, but now I am confused.

the routes for sample.routes.js:

angular.module('app').config(function ($stateProvider) {
$stateProvider.state('sample', {
  url: '/sample',
  templateUrl: 'modules/sample/sample.html',
  abstract: true,
  controller: 'SampleController as sample',
  data: {
    pageTitle: 'Sample Page'
  }
})
.state('sample.page', {
  views: {
    header: {
      templateUrl: 'modules/header/header.html'
    },
    content: {
      templateUrl: 'modules/sample/sample.content.html'
     },
    footer: {
      templateUrl: 'modules/footer/footer.html'
     }
   }
  });
});

You can't transition to abstract states(your otherwise is what is taking you to home.page). So the error makes sense. You would have to transition to sample.page. your setup doesn't really make sense. I'd sugest moving all of your views (header,content, footer) to the abstract state. — Nix
When I remove "abstract=true" and move the views into the initial state (i.e. "home") I get no errors but a blank page. — Steve
You would have to paste what you have for me to help (or show me a fiddle) — Nix
I have my code above. I added what I tried based on your suggestion, eliminating the sub-state and moving the views into the abstract state "home". However, if I trying to go to state "home" I get the error "Cannot transition to abstract state". If I remove abstract='true' from that state I get a blank screen. — Steve
Also, all the code is at github.com/smlombardi/ui-router-test/tree/test2 — Steve

Nix Nix · Accepted Answer · 2016-06-26T15:49:59

Example is below.

Here we go. So create a sep landing page (home). For all the states you want to be in the main part of your app you can use a sep tree called main. If you make your first main state abstract you can technically just have a bunch of child states.

Index page:

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

Views:

<script type="text/ng-template" id="modules/main/main.content.html">
  main content
</script>

<script type="text/ng-template" id="modules/footer/footer.html">
  footer
</script>
<script type="text/ng-template" id="modules/header/header.html">
  header
</script>
<script type="text/ng-template" id="modules/home/home.content.html">
  content
</script>

<script type="text/ng-template" id="modules/home/home.html">
  Nicks {{test}}
  <a ui-sref="main">Test</a>
</script>

Javascript:

myApp.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/home');
         $stateProvider.state('home', {
    url: '/home',
    controller: 'HomeController as home',
    templateUrl: 'modules/home/home.html'
    });

  $stateProvider.state('main', {
    url: '/main',
    views: {
      'header@main': {
        templateUrl: 'modules/header/header.html'
      },
      '': {
        templateUrl: 'modules/main/main.html'
      },
      'content@main':{
        templateUrl: 'modules/main/main.content.html'
      },
      'footer@main': {
        templateUrl: 'modules/footer/footer.html'
      }
    }
  });
});

Sample fiddle

Angular 1.4 UI Router: sub-routes?

Update

Update 2

Original question:

1 Answers