Explanation

Using the Bloc Jams site as a starting point the request was to convert it to use Angular JS.

Problem

To convert to Angular I needed to accomplish the following tasks.

  • Bootstrap Angular to my application
  • Configure routing and states for my application
  • Implement controllers for my application views
  • Create a service that handles song playback
  • Write a directive that controls song and volume sliders
  • Add a time code filter to display time properly

Solution

  • Bootstrap Angular to my application- I set up a new application structure, migrated the CSS and assets and did some updates, added Angular scripts and a global file, declared an Angular module, linked the module to the application.
  • Configure routing and states for my application- Created templates to use in the views, used UI-Router to set up routing for displaying these templates ($stateProvider) and urls ($locationProvider).
  • Implement controllers for my application views
    • Created several controllers
    • Converted javascript template repeats with ng-repeat
    • Converted hover states to use ngShow along with ngMouseover and ngMouseleave and click to ng-click directives.
  • Create a service that handles song playback- Created the service and injected in the the appropriate controllers, added Buzz library, refactored logic to work with Angular.
  • Write a directive that controls song and volume sliders- Wrote a custom directive that uses some jQuery methods.
  • Add a time code filter to display time properly- Add a new filter and implemented it on the template.

Results

All user requirements were met. I tested my solutions by.

  • Using chrome inspector to test responsiveness
  • Reviewing album covers displayed on the collection page
  • Mousing over each row on the album page to test for play button display, then playing one and doing this again.
  • Pausing a playing song
  • Choosing a new song after a song was playing and paused.
  • Playing/pausing a song from the music player.
  • Skipping forward and backward from a current song. Including the first and last songs.
  • Playing a song and seeing if it tracks the playback and using the bar to skip forward and backward in the song, listening to ensure reflected.
  • Using the volume bar to adjust the volume up and down, listening to see that it is reflected.

Conclusion

  • Angular is a good alternative to using plain JavaScript and jQuery for non-content heavy sites. It makes it simple to identify the actions being taken on an element.