I've been working on setting up a basic navigation system for my single-page application. It consists of a series of links in a list, each linked to a method in a NavigationController. The method then triggers $state.go by passing it a state string. I've also configured a fallback path in case the state is not resolved. The issue I'm facing is that despite the controller method being executed and the state transition seemingly functioning, I always end up with the default template instead of the specified one. Here's a snippet of my code (you can find a link to a fiddle below):
var app = angular
.module("AppName", ['ui.router']);
angular
.module("AppName")
.config(['$locationProvider',
function ($locationProvider) {
$locationProvider.hashPrefix('!');
}
]);
angular.module("core", []);
angular
.module("AppName")
.requires
.push("core");
// More code snippets...
<p>If you're interested, here's the HTML structure:</p>
<pre><code> <body>
<div ng-controller="NavBarController">
<ul>
<li><a href="#" ng-click="goToProfile()">Profile</a></li>
<li><a href="#" ng-click="goToHistory()">History</a></li>
</ul>
</div>
<div class="app">
<div class='app-body'>
<div class='app-content'>
<ui-view class="ng-scope">
<div>
Some place holder html
</div>
</ui-view>
</div>
</div>
</div>
</body>
You can access the full code and run a demo here.
Although I have some experience with AngularJS, this particular issue has left me puzzled. According to my understanding, the $state.go call should trigger a state transition which entails applying the new state's template. However, something seems amiss in this seemingly straightforward scenario. Despite trying various solutions from Stack Overflow, nothing seems to have resolved the problem. I suspect there might be an oversight on my part causing interference with the expected behavior.