Explanation
After the JavaScript and jQuery portion had been completed, it was time to build the app using the AngularJS framework. This required configuring routing and states for the application, implementing controllers for each view in the application, a service to control song playback, a custom directive that controls song and volume sliders, and a custom time code filter.
Problem
Solution
Results
Before using controllers, services, and views in AngularJS, I manually filled in data in the HTML to make sure that the layout looked right.
Conclusion
From producing the app with plain JavaScript first, then jQuery, then Angular, I was able to get a strong sense of how they could each achieve the same purpose but sometimes in much different ways. AngularJS was the most different from the other two because of how it is built for creating SPAs(single page applications) through controllers, services, and views. When going from JavaScript to jQuery, it felt much more like refactoring where many lines of code could be simplified into just a few lines in jQuery. Despite these, JavaScript is the foundation, and without building the application through plain JavaScript first, I would not have as good of an understanding of the DOM and how code is interpreted. I hope to be able to add more functionality to this app in the future such as the ability for users to add their own music and to personalize it for themselves.