Description
Part 1 – Angular Services (50 Points)
Using Angular services, build the Angular application to display the directions from
location A to location B. The data is obtained using the MapQuest API as shown in the
following link:
https://developer.mapquest.com/documentation/open/directions-api/route/get/
Sign up on the Mapquest developer page to get the free API key:
https://developer.mapquest.com
The data is returned in JSON format. The following data is used in this sample:
• data.route.distance (Total distance)
• data.route.formatteTime (Total time)
• data.route.legs[0].maneuvers (array of Turn-by-turn directions)
From each maneuver object, use the following data:
• narrative, distance, mapUrl, and iconUrl
The initial layout of the application is shown below. The From and To fields are
prepopulated. When the page is loaded, the directions are shown for those entries.
When the user clicks the line item entry, the associated map is displayed in another
window as shown below. The URL displayed is the mapUrl property.
Also, when either the From or the To location entries change, the directions should
be loaded automatically for those entries.
Part2 – Angular Routing (50 points)
Using Angular Routing and the RoutingSample2 provided in the lecture, complete the
application with the appropriate routes for adding a contact, editing an existing contact,
deleting an existing contact, and information about an existing contact. Adding a contact
should also have the option for Cancel and Save. Editing a contact should have the option
for Cancel and Save. Deleting a contact should prompt for confirmation.
Submission: Export your HW5_lastName folder as a zip file, with the
appropriate index.html for the above files, and upload the zip file to the
Assignment section.