angularJS nested abstract views

All we need is an easy explanation of the problem, so here it is.

I am using StateProvider library to create nested views in my AngularJS app.
I had an abstract view defined at the root and now need to define another abstract view as 2nd level child to the previously created abstract view.

Facing issues with this, Not sure if I can have nested abstract views or not. Any idea.

greatly appreciate your help.


How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

There could be more abstract-nested states in hierarchy. This example shows it in action, definition of these states could be like this:

  .state('main', {
      url: "",
      abstract: true,
      templateUrl: 'tpl.main.html',
  .state('main.middle', {
      url: "",
      abstract: true,
      templateUrl: 'tpl.middle.html',
  .state('main.middle.alpha', {
      url: "/alpha",
      templateUrl: 'tpl.leaf.html',
      controller: function ($scope, $state){
        $scope.state = $state.current;

Check the plunker. As we can see, the root (main) and its child (middle) do not use url at all… but they could..

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply