Mastering Web Application

(Rick Simeone) #1

Organizing Navigation


We need to decide what should happen if a user with the specified identifier doesn't
exist. One reasonable expectation would be that users of an application can't navigate
to a route pointing to a non-existing item.


As it turns out the resolve property of a route definition has a built-in support for
blocking route navigation. If a value of one of the resolve keys is a promise that is
rejected, AngularJS will cancel route navigation and won't change the view in the UI.


If one of the promises returned in the resolve section of a route
definition is rejected the route change will be canceled and the UI
won't be updated.

It should be noted that the URL in a browser's address bar won't be reverted if route
change is canceled. To see what it means in practice, let's assume that a list of users
is displayed under the /users/list URL. All the users in a list might have links
pointing to their edit forms (/users/edit/:userid). Clicking on one of those links
will change the browser's address bar (so it will become something like /users/
edit/1234) but it is not guaranteed that we will be able to edit user's details (user
might have been deleted in the meantime, we don't have sufficient access rights,
and so on). If the route's navigation is canceled the browser's address bar won't be
reverted and will still read /users/edit/1234, even if UI will be still reflecting,
content of the /users/list route.


The Browser's address bar and the displayed UI might get out of
sync if route navigation is canceled due to a rejected promise.

Limitations of the $route service


While the built-in $route service is very well-crafted and does an excellent job
for many applications, there are cases where it falls short. This section lists those
cases, so we can be aware and ready to change our application's design, or roll out
a custom routing service!


There is a community-driven effort in progress to provide a more
powerful routing system for AngularJS applications: ui-router. The
goal is to provide support for nested routes and routes that can
influence multiple rectangles on a screen. At the time of writing
this is still work in progress but you can follow its development at:
https://github.com/angular-ui/ui-router.
Free download pdf