First "no server" project at DevMountain
CSS HTML ApacheConf JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
angular-audio
angular-chart
css
images
js
music
README.md
index.html
planets.html
ships.html
splash.html

README.md

StarWarsAPI-Angular

Overview

This project was submitted for my no-server project at DevMountain. The project was fun in nature and utilized the Star Wars API.

The biggest challenge in this project was the implementation of Angular Chart to plot the ship statistics on a radar graph. I ended up having to use a nested array from the parsed reponse in order to input the data into the Angular Charts required format. You can see this approach in the Ships Controller and Service.

You may notice that there is a lot going on in the Controllers of the ships and planets. Since the API was void of information I wanted, and this was a no-server project, I decided to inject my own data (planet images and summaries) into the object for Angular extraction. In a real world scenario this would be handled on the back-end.

One fun addition I made to this website was Angular Audio. You will notice a sound plays when you click on the links at the top of each page. This effect uses Angular Audio.

Overall this project solidified my understanding of Angular using routing, custom directives, and configuring controllers and services to GET data from a live API.

Lessons Learned

If I had to create this webapp again I would have established a more flexible file structure early on. I started this project early and realized I needed to create the ships page after I already began. As a result I had to do some re-arranging of index files, controllers, and services. This was unneccessary and could have been prevented with a more efficient file structure from the beginning. This was the biggest lesson learned on this project that I will take with me in to my future projects. Lastly, I would have made this website responsive if I had to do it again.

Screenshots

Splash Page
Planets Page
Ships Radar Graph

Libraries/Frameworks/Resources Used

AngularJS
Angular Audio
Angular Chart
Angular Routes
Normalize.css
Star Wars API