3

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.

Improve this question
4
  • Do you have the ng-app and ng-view tags in your html? Commented May 30, 2014 at 19:25
  • 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. Commented May 30, 2014 at 19:26
  • 1
    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. 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. Commented May 30, 2014 at 19:53

2 Answers 2

Reset to default
3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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 />', })

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.