I've integrated UI-Router into my application but I'm encountering an issue with a nested route. Here's how my index.html page is structured;
<body>
<!-- Navigation code -->
<!-- Content from the template -->
<div ui-view></div>
<!-- Footer -->
<!-- Application Scripts -->
</body>
This is the Angular ui-route code I have implemented;
(function () {
'use strict';
var app = angular.module('rbApp', ['ngAnimate', 'ui.router', 'ui.bootstrap']);
app.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state("home", {
url: "/",
templateUrl: "/App/WebSite/home.html",
controller: "homeController as homeVm"
})
.state("programs", {
url: "/programs",
templateUrl: "/App/WebSite/programs.html",
controller: "programsController as programVm"
})
.state("programs.complete", {
url: "/complete",
templateUrl: "/App/WebSite/programsComplete.html"
})
.state("articles", {
url: "/articles",
templateUrl: "/App/WebSite/articles.html",
controller: "articleController as articleVm"
})
}]);
app.run(['$rootScope', function ($rootScope) {
$rootScope.$on('$locationChangeStart', function (event, newUrl, oldUrl) {
console.log('Location change: %s --> %s', oldUrl, newUrl);
});
}]);
})();
Upon selecting the "programs" route, the page is rendered correctly and the "app.run" code above logs to the console;
Location change: http://localhost:50321/#/ --> http://localhost:50321/#/programs
Within the programs page, there is an image embedded in an anchor tag like this;
<div class="col-md-3 hidden-sm hidden-xs">
<a ui-sref="programs.complete"><img class="img-thumbnail img-responsive" src="/Images/Programs/Program01Small.jpg" /></a>
</div>
However, clicking on the image triggers the following console log;
Location change: http://localhost:50321/#/programs --> http://localhost:50321/#/programs/complete
While the routing seems to be functioning correctly, the "programsComplete.html" template fails to display, instead, the browser continues to show the "programs.html" template.
After checking the console log for errors, none are found. Also, the "programsComplete.html" currently only contains a <h1> tag and text confirming that the template is indeed being loaded.
If anyone can offer insights into why the template might not be loading, I would greatly appreciate it.