When attempting to access a ui-router parent or child state by entering its corresponding URL, I encounter redirection to my $urlRouterProvider.otherwise() statement rather than directly accessing the state. While I understand that using ui-sref with an a link is a reliable method to enter a state, typing the state's URL into the browser always leads me to the otherwise route.
For instance, my intention is to navigate to the page state by visiting example.com/#/page in the browser. However, instead of accessing the desired state, I am redirected elsewhere.
In my JavaScript code:
angular.module('app', [ 'ui.router', 'subapp']);
angular.module('app').config(function($urlRouterProvider, $locationProvider) {
}).controller('appCtrl', function(){});
angular.module('subapp', ['ui.router']);
angular.module('subapp').config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when('#/page/nothing', '/');
$stateProvider
.state('page', {
url: '#/page',
templateUrl: 'page.tpl.html'
})
.state('page.edit', {
url: '/:myparameter',
templateUrl: 'page-edit.tpl.html'
});
$urlRouterProvider.otherwise('/hello');
});
Within Index.html:
<body ng-controller="appCtrl">
This is the index.html file<br>
<a href="#/page">Go to page state</a><br>
<a href="#/page/myparameter">Go to page child state with a parameter</a>
<ui-view></ui-view>
PLNKR: http://plnkr.co/edit/HQziTB2CyJrCvbgzzuJm?p=preview
I should note that I have a subapp service injected into the main app, although I believe this should not affect the fact that the page state is meant to be a 'top-level' state within the <ui-view> of index.html.
How can I enable direct navigation to a URL, even one containing a parameter? The documentation suggests it is feasible, but I am unable to implement it successfully.