Angular UI-Router not displaying template

Question

I have come across a very weird bug. My UI-Router is set up as follows with the ui-view element in the home template.

.state('main.home.one', {
    url: '/',
    templateUrl: 'partials/home/one',
    controller: "OneCtrl"
})
.state('main.home.two', {
    url: '/two/',
    templateUrl: 'partials/home/two',
    controller: "TwoCtrl",
})

when I navigate from main.home.one to main.home.two using $state.go() it works fine
when I navigate from main.home.one to main.home.two using the url /two/ it does not work and while it successfully called the template from the server, it loads !-- uiView: undefined --
If I change the url to '/two' from '/two/' then it works fine when navigating by url
Only ui-view elements work, attributes in a <div ui-view> don't work

My goal to to load a state parameter as such: "/two/:id" which of course breaks things. If anyone can shed some insight into this problem, I would be much appreciative.

A tip for the future, it make it easier for us to debug stuff if we can play with it. Next time post js question with link to jsfiddle or something similar. — Patrick Lorio
– Patrick Lorio, Commented May 30, 2014 at 19:26
I have a ng-app declared in my html tag: <html lang='en' data-ng-app='myapp'> I have no ng-views as i am using angular UI-Router instead. I do have ui-views in the correct places. — August Brenner
– August Brenner, Commented May 30, 2014 at 19:48
Sorry about not being able to use a fiddle. It is a large application that I am not allowed to post, and I cant recreate the problem on a smaller custom built fiddle. — August Brenner
– August Brenner, Commented May 30, 2014 at 19:53

user3505342 · Accepted Answer · 2015-03-06 21:08:25Z

Trailing slashes are an important part of the route with UI router. Check out this section of the FAQ on making trailing slashes optional, hopefully that will help!

Edit: Related code from the link

How to: Make a trailing slash optional for all routes

How can I have my routes be activated when the url contains either a trailing slash or not?

Set strictMode to false in your config block:

$urlMatcherFactoryProvider.strictMode(false)

For older version of ui-router, add this snippet to your module's config function. It creates a rule on $urlRouterProvider that maps all urls that are missing a trailing slash to the same url but with the trailing slash appended.

You'll need to specify all urls with a trailing slash if you use this method.

$urlRouterProvider.rule(function ($injector, $location) {
    var path = $location.url();

    // check to see if the path already has a slash where it should be
    if (path[path.length - 1] === '/' || path.indexOf('/?') > -1) {
        return;
    }

    if (path.indexOf('?') > -1) {
        return path.replace('?', '/?');
    }

    return path + '/';
});

Note: All routes in app/scripts/app.js must be redefined with trailing /. This means that routes such as /things/:id become /things/:id/ as well.

Діма Киричук · Accepted Answer · 2015-10-21 23:47:13Z

1

Substate template are being inserted into parent's template. Seems like your main.home state has no template (or the template has no ui-view element). Add the following to your routes configuration:

.state('main.home', {
    template: '<ui-view />',
})

edited Oct 21, 2015 at 23:47

answered Oct 21, 2015 at 22:48

Діма Киричук

1,4512 gold badges9 silver badges8 bronze badges

Collectives™ on Stack Overflow

Angular UI-Router not displaying template

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related