html partial is not loaded into ui-view

Question

I have posted a sample on plunker:

http://plnkr.co/edit/aOOlXOUIUQTARb8D7jNR?p=preview

I get no errors in my browser console.

I want that when I switch the day/week/month views by pressing the according button that below the buttons the html for the view is shown. But that happens not.

The reason might because the day , week and month controllers are not hit in the code whyever that is.

So my question is why are the controllers not loaded or the ui-view not replaced with the real html partial.

As I do not know the real cause I have to ask for both cases.

'use strict';
angular
  .module('dates', ['ui.router'])
  .run(['$rootScope', '$state', '$stateParams',
      function($rootScope, $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
      }
    ]
  )
  .config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/dateplanner/day');

    $stateProvider
      .state('dates', {
        url: '/dateplanner',
        abstract: true,
        views: {
          'menu@': {
            templateUrl: 'menu.html'
          },
          'content@': {
            templateUrl: 'dateplanner.html',
            controller: 'DateplannerController'
          }
        }
      })
       .state('dates.day', {
        url: '/day',
        views: {
          'planner@': {
            templateUrl: 'dateplannerday.html',
            controller: 'DateplannerDayController'
          }
        }
      })
        .state('dates.week', {
        url: '/week',
        views: {
          'planner@': {
            templateUrl: 'dateplanner.week.html',
            controller: 'DateplannerWeekController'
          }
        }
      })
        .state('dates.month', {
        url: '/month',
        views: {
          'planner@': {
            templateUrl: 'dateplanner.month.html',
            controller: 'DateplannerMonthController'
          }
        }
      })
  });

MENU.HTML

<ul>
  <li ng-class="{ activeButton: $state.includes('dates') }" ui-sref-active="active">
    <a ui-sref="dates.day">date planner</a> 
  </li>
</ul>

DATEPLANNER.HTML

<div class="btn-group">
  <button ui-sref="dates.day" ui-sref-active="btn-primary" type="button" class="btn btn-default">Day</button>

  <button ui-sref="dates.week" ui-sref-active="btn-primary" type="button" class="btn btn-default">Week</button>

  <button ui-sref="dates.month" ui-sref-active="btn-primary" type="button" class="btn btn-default">Month</button>
</div>
<div style="background:white;" ui-view="planner">
Loading...</div>

Answer 1

As we've discussed it here:

• Replace self partial with another partial with angularjs ui router

the issue is related to the:

• View Names - Relative vs. Absolute Names

In our case, we can fix this example by extending the child states (day, week, month) resp. their view names to be targeting the absolute view names target:

   .state('dates.day', {
    url: '/day',
    views: {
      'planner@dates': {
         ...
      }
    }
  })
    .state('dates.week', {
    url: '/week',
    views: {
      'planner@dates': {
         ...
      }
    }
  })
    .state('dates.month', {
    url: '/month',
    views: {
      'planner@dates': {
         ...
      }
    }

Because these views target is in the state dates we are adding its name after delimiter @, i.e. 'planner@dates'. Also, because this state is parent of all of them, we can skip it. Parent state is behind the scene injected for us by ui-router. Some more explanation:

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.

Quick overview

1. The ui-view="content" placed in index.html is getting the absolute name "content@". The delimiter is @ and state is root represented as "" (string empty). I.e. viewname@statename ===`"content@"

2. The dates children can target parent like "planner@dates" or "planner". They also can target root like "content@"

Answer 2

Please see here http://plnkr.co/edit/8a898K4F0zz1z9VcH9Tq?p=preview what was the reason to use @ in view name ?

 angular
      .module('dates', ['ui.router'])
      .run(['$rootScope', '$state', '$stateParams',
          function($rootScope, $state, $stateParams) {
            $rootScope.$state = $state;
            $rootScope.$stateParams = $stateParams;
          }
        ]
      )
      .config(function($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise('/dateplanner/day');

        $stateProvider
          .state('dates', {
            url: '/dateplanner',
            abstract: true,
            views: {
              'menu': {
                templateUrl: 'menu.html'
              },
              'content': {
                templateUrl: 'dateplanner.html',
                controller: 'DateplannerController'
              }
            }
          })
           .state('dates.day', {
            url: '/day',
            views: {
              'planner': {
                templateUrl: 'dateplannerday.html',
                controller: 'DateplannerDayController'
              }
            }
          })
            .state('dates.week', {
            url: '/week',
            views: {
              'planner': {
                templateUrl: 'dateplanner.week.html',
                controller: 'DateplannerWeekController'
              }
            }
          })
            .state('dates.month', {
            url: '/month',
            views: {
              'planner': {
                templateUrl: 'dateplanner.month.html',
                controller: 'DateplannerMonthController'
              }
            }
          })
      });