Beginning AngularJS

(WallPaper) #1
Chapter 8 ■ Organizing Views

Route parameters are much more flexible than the fixed, or static, routes that we have seen so far. To demonstrate
how they work, we are going to add a very simple contact form to our contact view template and use a route parameter
to help us determine the initial state of its subject field. Here (Listing 8-11) is the revised contact view template:


Listing 8-11. The Revised Contact View Template



Contact Page













There’s nothing too fancy going on here; it’s just a basic form with two fields. We aren’t really interested in submitting
this form, so we won’t pay any attention to the usual things (such as field validation and submitting it to a server). The
important thing to take note of is the fact that we have a binding, named subject, in place on the subject field. The object
of this exercise is to pre-populate the subject field, based on how the user ended up at this view template. This will make
more sense when you look at Listing 8-12. This is the about.html file we saw earlier, but modified to support this feature.


Listing 8-12. The Revised About View Template



About Page


If you want to learn more about us please let us know.


If you want a free quote give us a call or inquire through
our contact form
.



Again, there is nothing too fancy going on here, just a couple of paragraphs of content containing a couple of links.
Take a close look at these links, though, as they contain our route parameters. Both of these links have two segments:
the first one has the segments contact and learn, and the second one has the segments contact and quote. In both
cases, the second segment acts as the route parameter under the route definition we examine next (Listing 8-13).


Listing 8-13. Additional Route Definition for the Contact View Template


// route for the contact page with subject param
.when('/contact/:subject', {
templateUrl: 'pages/contact.html',
controller: 'contactController'
});

Free download pdf