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

Question

I'm trying to get ui.router to work with the following 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 is the 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 a problem) but the html above is injected using ng-include like so.

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

Just to be clear I verified that the router gets called.

I thought that 'otherwise' would navigate to the url and it would transit into the default state which will inject the partial views but it doesn't seems to work, I'm sure I'm missing something but I cannot figure it out.

In these case, plunker would always help. Does it work without html5? — Radim Köhler
– Radim Köhler, Commented Oct 13, 2014 at 6:12
I tried to make this work in Plunker but it seems like it throws 404 for my style.css and app.js.. — iam3yal
– iam3yal, Commented Oct 13, 2014 at 7:42
Which version of Angularjs are you using? Have you tried this: stackoverflow.com/questions/17200231/… — wojjas
– wojjas, Commented Oct 13, 2014 at 7:55
I'm using version 1.3.0-rc.5. I do have the base tag as part of my page, it seems like a problem with ng-include. — iam3yal
– iam3yal, Commented Oct 13, 2014 at 8:03

iam3yal · Accepted Answer · 2014-10-13 09:30:20Z

I solved it by replacing ng-include with ui-view.

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

My router looks like 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 a solution or a hack but it works. :)

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related