I hope you had a great weekend and you’ve reviewed the feedback on the first part of your Mega Travel page. Since this is a multi-part assignment you’ll need to make any corrections I’ve called out while working on the next step in order to make sure your page is in working order.
This next section focuses on AngularJS – note that AngularJS and Angular.io (or Angular 2 as it’s often call) are NOT the same thing and will work very differently. Keep this in mind when you look at which one you have downloaded and when viewing resources and tutorials.
We use AngularJS in this class as it’s typically easier to learn than other JavaScript frameworks and libraries and it is a mature system will lots of resources.
In this assignment you are building a travel reservation website for Mega Travel, a local travel agency.
Mega Travel wants a website where prospective customers can go and fill out a form with their travel details. They need to know how many children and adults are traveling, the destination, and the dates they want to take the trip. Of course we also need to get their contact information as well so an agent can sell them a travel package.
Currently, Mega Travel is offering trips to the following destinations:
• Brisbane, Australia
• Vancouver, Canada
• New York City, United States
• Berlin, Germany
• Cancun, Mexico
Site Requirements:
When the user chooses a destination city, the activities available should update to only those appropriate for that destination. See the table below.
City
Activities
Brisbane
City Tours, Sports, Cycling, Museums, Boating
Vancouver
Museums, Sailing, Beach, Hiking, Boating
New York City
Museums, Theatre, Parks and Recreation, City Tours
Berlin
City Tours, Museums, Cycling
Cancun
Parks and Recreation, Beaches, Boating, Snorkeling
You should have Submit and Reset buttons. Setup your form so that you will process the form data using a PHP Script (that will be done in another assignment) on the server. The Angular form should be designed to use two-way data binding so that your Controller is getting the data from the form using data-binding.
Resources
Get AngularJS: https://angularjs.org
Creating and Submitting Angular Forms: https://scotch.io/tutorials/submitting-ajax-forms-the-angularjs-way