angularjs - ui.router 'otherwise' doesn't seems to work -

angularjs - ui.router 'otherwise' doesn't seems to work -

i'm trying ui.router work next setup.

export class router { /* tslint:disable no-unused-variable */ private static $inject: string[] = ["$stateprovider", "$urlrouterprovider", "$locationprovider"]; /* tslint:enable no-unused-variable */ constructor($state: ng.ui.istateprovider, $urlrouter: ng.ui.iurlrouterprovider, $location: ng.ilocationprovider) { $urlrouter.otherwise("/"); $state.state("default", { url: "/", views: { "header": { templateurl: "/views/layout/header.html" }, "sidebar": { templateurl: "/views/layout/side-menu.html" }, "": { templateurl: "/views/workspace/index.html" }, "footer": { }, } }); $location.html5mode(true); } }

here partial file i'm using.

<div id="workspace"> <div id="workspace-header"> <div data-ui-view="header"></div> </div> <div id="workspace-container"> <div> <div data-ui-view="sidebar"></div> </div> <div> <div> <div> <div id="workspace-view"> <div data-ui-view></div> </div> <div id="workspace-footer"> <div data-ui-view="footer"></div> </div> </div> </div> </div> </div> </div>

i'm not sure it's related (or whether it's problem) html above injected using ng-include so.

<div id="dashboard" data-ng-include="'/views/master.html'" data-prevent-touch-scroll></div>

just clear verified router gets called.

i thought 'otherwise' navigate url , transit default state inject partial views doesn't seems work, i'm sure i'm missing cannot figure out.

i solved replacing ng-include ui-view.

<div id="dashboard" data-ui-view data-prevent-touch-scroll></div>

my router looks this.

export class router { /* tslint:disable no-unused-variable */ private static $inject: string[] = ["$stateprovider", "$urlrouterprovider", "$locationprovider"]; /* tslint:enable no-unused-variable */ constructor($state: ng.ui.istateprovider, $urlrouter: ng.ui.iurlrouterprovider, $location: ng.ilocationprovider) { $urlrouter.otherwise("/"); $state.state("default", { url: "/", templateurl: "/views/master.html", onenter: ["$state", "$timeout", ($state: ng.ui.istateservice, $timeout: ng.itimeoutservice) => { $timeout(() => { $state.go("default.master"); }); }] }); $state.state("default.master", { views: { "header": { templateurl: "/views/layout/header.html" }, "sidebar": { templateurl: "/views/layout/side-menu.html" }, "": { templateurl: "/views/workspace/index.html" }, "footer": { }, } }); $location.html5mode(true); } }

i'm not sure whether it's solution or hack works. :)

angularjs typescript angular-ui-router