Angular 1.3 + ui-router + generator-ng-poly embedding nested(?) views not working

Question

I am new to Angular, ui-router and generator-ng-poly and am hoping someone can help with what is likely a simple syntax issue.

I am using generator-ng-poly for a new project and working from the "Deep Level Example" with an Angular 1.3 based app using ui-router and HTML.

First I created a "home" module, then a "header" module inside that. So...

 yo ng-poly:module home
 yo ng-poly:module home/header

Which gives me these two controllers: app/home/home.js

    (function () {
  'use strict';

  /* @ngdoc object
   * @name home
   * @requires $stateProvider
   *
   * @description
   *
   */
  angular
    .module('home', [
      'ui.router',
      'home.header'
    ]);

  angular
    .module('home')
    .config(config);

  function config($stateProvider) {
    $stateProvider
      .state('home', {
        url: '/home',
        templateUrl: 'home/home.tpl.html',
        controller: 'HomeCtrl',
        controllerAs: 'home'
      });
  }

})();

and app/home/header/header.js

(function () {
  'use strict';

  /* @ngdoc object
   * @name home.header
   * @requires $stateProvider
   *
   * @description
   *
   */
  angular
    .module('home.header', [
      'ui.router'
    ]);

  angular
    .module('home.header')
    .config(config);

  function config($stateProvider) {
    $stateProvider
      .state('header', {
        url: '/header',
        templateUrl: 'home/header/header.tpl.html',
        controller: 'HeaderCtrl',
        controllerAs: 'header'
      });
  }

})();

Now I want to use the "header" from within home.tpl.html and I am struggling with how to do this. From what I understand either

<div ui-view=“header”></div>

or

<div ui-view=“home.header”></div>

should work. But neither is. Hours of Googling has not helped since all the examples use the more common $stateProvider format where there are chained states like so:

$stateProvider
      .state('home', {
        url: '/home',
        templateUrl: 'home/home.tpl.html',
        controller: 'HomeCtrl',
        controllerAs: 'home'
      })
      .state('home.header', {
        url:'/header',
        templateUrl: 'home/header/header.tpl.html',
        controller: 'header/header-controller.js',
        controllerAs: 'header'
      });

How should I be referencing "header" to have it show up properly inside home.tpl.html?

Answer 1

To be able to use the header state in the home state, they will need to nested (chained). Your application can only be in one state at once, but nested states need allow the use that you require.

So, it's not obvious, but you can safely make one state the parent of another in separate files/configs because of the way registration works (emphasis is mine):

If you register only a single state, like contacts.list, you MUST define a state called contacts at some point, or else no states will be registered. The state contacts.list will get queued until contacts is defined. You will not see any errors if you do this, so be careful that you define the parent in order for the child to get properly registered. - Nested States

Also, the ui-view attribute does not take the name of the state that you want as you showed in your example. It is instead creating a named view (a very powerful feature - Multiple Named Views), but something you probably don't need just yet. Just leave is as:

<div ui-view></div>

So to set the application to the correct state, use $state.go() function: e.g.

$state.go('home');