Mastering Web Application

Chapter 6

With ng-view, this can be rewritten as follows:

<div class="container-fluid" ng-view>

<!-- Route-dependent content goes here -->

</div>

As you can see, we simply substituted the ng-include directive for ng-view one.
This time we don't need to provide an attribute value, since the ng-view directive
"knows" that it should display the content of the currently matching route.

Matching flexible routes

In the naïve implementation, we were relying on a very simple route matching
algorithm, which doesn't support variable parts in URLs. In fact it is a bit of a stretch to
call it an algorithm, we are simply looking up a property on an object corresponding to
URL's path! Due to the algorithm's simplicity, we were using a URL query parameter
in the query string to pass around the user's identifier as follows:

/admin/users/edit?user={{user.id}}

It would be much nicer to have URLs where the user's identifier is embedded as part
of a URL, for example:

/admin/users/edit/{{user.id}}

With the AngularJS router, this is very easy to achieve since we can use any string
prefixed by a colon sign (:) as a wildcard. To support a URL scheme where the user's
ID is part of a URL we could write as follows:

.when('/admin/users/:userid', {templateUrl: 'tpls/users/edit.html'})

This definition will match any URLs with an arbitrary string in place of the :userid
wildcard, for example:

/users/edit/1234

/users/edit/dcc9ef31db5fc

On the other hand, routes with an empty :userid, or the :userid containing slashes
(/) won't be matched.

It is possible to match routes based on parameters that can contain

slashes, but in this case we need to use slightly modified syntax:

*id. For example, we could use the star-based syntax to match paths

containing slashes: /wiki/pages/*page. The route-matching

syntax will be further extended in AngularJS Version 1.2.