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?

score 3 · Accepted Answer · answered Mar 01 '15 at 23:08

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');

He wants to have a page where there are different modules/views included, like header, sidebar, footer all at the same time included in the page but living in separate modules. — Saša Šijak, May 07 '15 at 08:14
@saša-Šijak that is correct. My goal was to build a page out of separate modules/components. — TheOncomingCode, May 13 '15 at 15:35
Congrats on being featured in Paul Ford's "What Is Code?" :) https://www.bloomberg.com/graphics/2015-paul-ford-what-is-code/#what-is-debugging — JoeCool, Mar 02 '21 at 15:48

score 2 · Answer 2 · answered May 12 '15 at 14:11

2

did not exactly understood your target goal. Do you want to add named view header on the level of your main view home (see Multiple-Named-Views) or simple nested view?

If so, you should not give a name to you ui-view in html, and define a name of child route with dot syntax to infer your hierarchy to the $stateProvider, like this:

$stateProvider
  .state('home.header', {...})

answered May 12 '15 at 14:11

bFunc

1,370
1
12
22

I want a "index.html" page to be a base page with 3 fixed elements that will show on every url on the site but will live in separate modules : footer, header, sidebar. And dynamic content area in the middle of the page which will change when url changes. I can not get it how to do that with ui-router, provide example in template and routes. – Saša Šijak May 14 '15 at 15:40

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

2 Answers2