Route parameter validation / handling invalid parameters

843 views
Skip to first unread message

James Daily

unread,
Aug 6, 2013, 12:55:44 PM8/6/13
to ang...@googlegroups.com
Starting from: http://docs.angularjs.org/tutorial/step_07

When a faked phoneId is passed (eg: http://localhost:8000/app/index.html#/phones/motorola-made-up-phone ), and no motorola-made-up-phone.json is found, angular-phonecat simply displays a blank phone detail page with no error message.

How should the example app be improved to, say, re-route the user back to the index page (or even a 404 page) in the event that data for a given phoneId is not found?

Should phoneId's be validated by the router somehow? Or perhaps would the PhoneDetailCtrl re-route back to the index when it can't find motorola-made-up-phone.json ? Or should the view use a conditional to replace the entire Phone Detail view with an error message?

Thanks :)

-James

Joshua Woodward

unread,
Aug 6, 2013, 1:20:34 PM8/6/13
to ang...@googlegroups.com

On Tue, Aug 6, 2013 at 9:55 AM, James Daily <james...@gmail.com> wrote:
http://docs.angularjs.org/tutorial/step_07

in the tutorial the list is generated by
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">

I think the idea is that your phone model should be correct, and only list phones available, but you could try doing some sort of verification in PhoneDetailCtrl (step8)
 
  1. function PhoneDetailCtrl($scope, $routeParams, $http, $location) {
  2. $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
  3. $scope.phone = data;
  4. }).error(function(){$locations.path('/phones')};
  5. }

should through an error if phoneId.json is not found

you could maybe setup .path('phones/404') and have some data in 404.json that displays phone not found to the user as well


--
Joshua Woodward

James Daily

unread,
Aug 6, 2013, 1:58:59 PM8/6/13
to ang...@googlegroups.com
Agreed that the model should be correct, but if someone manually types in an invalid URL, I'd like the app to handle it more gracefully than an empty detail page.

$location looks promising, I will try it out!

And perhaps I'll make an improvement for the model to keep a list of known valid values to check, rather than attempting to pull json and failing.

Thanks,
James
Reply all
Reply to author
Forward
0 new messages