I am attempting to create a basic nested route in Angular, but I am running into an issue where the view does not display when the nested route is accessed.
Even with the URL path set to
http://localhost:9000/#/home/hellohomeHello.
Why is the nested ui view not displaying the home.hello template?
HTML Output:
<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 Configuration:
// 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'
})
// Uncomment the line below to use 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>