0

I'm trying to set urls with angulars ui-router so that I may go to a base url OR go to a the same base url + parameter. So - I can either go to /test or /test/1 and it will go to the same page - the only difference being the url parameters. So I have this so far: 

 .state('test', { url: '/test', templateUrl: 'views/test.html', controller: 'testCtrl' }) .state('testState', { url: '/test/:id', templateUrl: 'views/test.html', controller: 'testCtrl' });

/test seems to work fine, but when I type in test/1, it displays cannot GET. Is this because I am typing the url by hand instead of using ui-routers internal linking (ui-sref). I say this because I notice that when I just type in /test, it's the same thing as well. However, the test and home clicks work fine when I use the links on the page set up with ui-sref. I'd like to be able to share the URL for test/:id, as this will be a web app where people logged in can share links.

Also - is there a better way to setup the test and testState into 1 state perhaps? Thanks!

Improve this question

2 Answers 2

Reset to default
1

Your problem is not on the Angular side, but rather your server (Node I am guessing based on the response wording). Node/express/whatever doesn't know which file to server for test/1. Try relaxing your routing scheme. By that I mean, set up the code so that any request for, say test* resolves to the same file as test/. Here's an example in an express app:

/** * For any GET that we can't resolve to a static file, assume it's * an attempt to go to an angular route */ app.get('*', function(req, res){ res.sendfile(path_to_indexfile); });

Update (after discussion):

Alternatively you can turn off html5 mode- then you don't need to worry about telling your server how to deal with /test/1--angular will use /test/#!/1 which shouldn't cause an issue.

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

5 Comments

Thank you for your answer, and yes it is node! I am not familiar with what you mean when you say relax the routing scheme, could you elaborate? I am using a grunt task (grunt-connect) to just run a little local dev server right now.
Glad that was useful; I added an example. Put it after your code for serving static files so you don't break everything :)
I am just using the grunt task right now - there isn't even a server.js set up, do you know if there is a way to handle it in the task itself (grunt-connect)?
OR perhaps maybe there is a better task for testing this stuff - i just want to be able to type in a dynamic url (locally) and have it found, ui-routes doesn't seem to like this currently. Thanks!
In that case I would recommend turning off html5 mode and using hashbang syntax. That way you don't need to worry about telling your server how to deal with /test/1--angular will use /test/#!/1 which shouldn't cause an issue. I prefer hashbang syntax over html5 mode for this exact reason.
1

There are 2 options for you, using one state "/test/:id" and then the parameter is optional you can call /test/1 or /test/.

If you want to enable /test you will need another state.

Here is a Plunker with all the options, working. As AlexMA mentioned seems like you didn't post the problematic code so I cant fix your example.

This config is working for your request:

.config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/'); $stateProvider .state('view', { url: '/view/:inboxId', templateUrl: 'tpl.view.html', controller: 'viewCtrl' }). state('view_root', { url: '/view', templateUrl: 'tpl.view.html', controller: 'viewCtrl' }) }) .controller('viewCtrl', function($scope, $state, $stateParams) { $scope.state = $state.current; $scope.params = $stateParams; })
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.