Recently, I developed a website that utilizes angular-ui-router to map to multiple views. While most of the functionality is working as expected, there are two issues that I've encountered:
- When a user navigates to a page without an angular route, the view does not load.
- Regardless of the URL the user tries to access, the browser keeps resetting it to the value set in my
$urlRouterProvider.otherwise(). However, the view remains unchanged.
Here's an excerpt from my main module:
angular.module('package.name', [
'ui.router',
'ui.bootstrap',
'package.nameControllers'
]).
config(function($stateProvider, $urlRouterProvider) {
$stateProvider.
state('home', {
url: 'home',
templateUrl: 'templates/home.html',
controller: 'homeCtrl'
}).
state('other', {
url: 'other',
template: 'Another page'
});
$urlRouterProvider.otherwise('/home');
});
I'm puzzled by what could be going wrong. Any insights?
To further illustrate this issue, I have recreated it on this plunkr. You can see the problem with the URL not updating correctly here.