I have implemented UI-Router in my application but I'm having a problem with a nested route. My index.html page looks like;
<body> <!-- Navigation code --> <!-- Content from the template --> <div ui-view></div> <!-- Footer --> <!-- Application Scripts --> </body> My Angular ui-route code is;
(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); }); }]); })(); When I select the "programs" route the page is displayed correctly and the "app.run" code above updates the console log with;
Location change: http://localhost:50321/#/ --> http://localhost:50321/#/programs On the programs page I have an image within an anchor tag as follows;
<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> When the image is clicked the console log displays;
Location change: http://localhost:50321/#/programs --> http://localhost:50321/#/programs/complete So it appears the routes are behaving as expected. The only problem is the "programsComplete.html" template is not displayed, the browser continues to display the "programs.html" template.
I have checked the console log but no errors are displayed and currently the "programsComplete.html" only contains a <h1> tag and text so I can confirm the template is being loaded.
Can anyone advise why this would not be loading the template?
