I'm trying to create a simple nested route within angular and whenever a nested route occurs the view doesn't pop up

With a path of http://localhost:9000/#/home/hello I still only see homeHello

Why isn't the nested ui view picking up the home.hello template?

Rendered HTML

<section ui-view="" class="ng-scope">
  <section class="home ng-scope">
    home
    <a ui-sref=".hello" href="#/home/hello">Hello</a>
    <!-- uiView: ui-view -->
    <div ui-view="ui-view" class="ng-scope"></div>
  </section>
</section>

Angular Ui Router

// app.js

angular.module('spoonFeeder',
  ['ui.router',
   'ngAnimate',
   'ngCookies',
   'ngResource',
   'ngSanitize',
   'ngTouch'])

.config(function($stateProvider, $urlRouterProvider, $locationProvider) {

    $urlRouterProvider.otherwise('/home')

    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'home/home.html'
        })
        .state('home.hello', {
            url: '/hello',
            templateUrl: 'home/hello.html'
        })

        // use the HTML5 History API
        // $locationProvider.html5Mode(true);
});

Views

<!-- home/home`.html -->
<section class="home">home<a ui-sref=".hello">Hello</a>
  <div ui-view="ui-view"></div>
</section>

<!-- home/hello.html -->
<section class="hello">Hello</section>

I'm trying to create a simple nested route within angular and whenever a nested route occurs the view doesn't pop up

With a path of http://localhost:9000/#/home/hello I still only see homeHello

Why isn't the nested ui view picking up the home.hello template?

Rendered HTML

<section ui-view="" class="ng-scope">
  <section class="home ng-scope">
    home
    <a ui-sref=".hello" href="#/home/hello">Hello</a>
    <!-- uiView: ui-view -->
    <div ui-view="ui-view" class="ng-scope"></div>
  </section>
</section>

Angular Ui Router

// app.js

angular.module('spoonFeeder',
  ['ui.router',
   'ngAnimate',
   'ngCookies',
   'ngResource',
   'ngSanitize',
   'ngTouch'])

.config(function($stateProvider, $urlRouterProvider, $locationProvider) {

    $urlRouterProvider.otherwise('/home')

    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'home/home.html'
        })
        .state('home.hello', {
            url: '/hello',
            templateUrl: 'home/hello.html'
        })

        // use the HTML5 History API
        // $locationProvider.html5Mode(true);
});

Views

<!-- home/home`.html -->
<section class="home">home<a ui-sref=".hello">Hello</a>
  <div ui-view="ui-view"></div>
</section>

<!-- home/hello.html -->
<section class="hello">Hello</section>

• javascript
• angularjs
• angular-ui-router

• 2 Your ui-sref on your child state should include the parent. e.g. ui-sref="home.hello" AFAIK – Christopher Marshall Commented Jul 21, 2014 at 22:04
• It doesn't need to this is relative pathing. even with it on there it doesn't work – MikaAK Commented Jul 21, 2014 at 22:21

1 Answer 1

There is a plunker with a working example. What I changed was: "extending of the parent template"

<section class="home">home
  <a ui-sref=".hello">Hello</a>
  <div ui-view="ui-view"></div>
  <div ui-view=""></div>      <!-- new line -->
</section>

The new element div does contain also attribute ui-view, but in this case, it is unnamed so this state definition can find it:

.state('home.hello', {
  url: '/hello',
  templateUrl: 'tpl.hello.html',
})

To show, how we can target the first one ui-view="ui-view", which is in fact named, there is new state Hello2:

.state('home.hello2', {
  url: '/hello2',
  views : {
    'ui-view' : {
      templateUrl: 'tpl.hello2.html',
    }
  }
})

and this state, is now really targeting the named ui-view="ui-view, because it uses explicit views {} defintion. The state hello, on the other hand uses implicit views definition which could be expressed like this:

  views : {
    '' : { // targeting unnamed ui-view=""
      templateUrl: 'tpl.hello2.html',
    }
  }

Check it here