Summary

This project was my first AngularJS based application. The goal for this application was to make a replica of the music playing application, Spotify.

Explanation

This application was all about getting real practice in developing within the AngularJS framework. I chose to work on a project making a replica of the popular music playing application, Spotify, because it’s a popular web application that millions of people use and it has many interesting features.

Problem

I wanted to develop a web app that could let the user select a song to play from an album and then be able to control the song via traditional controls, as well as move among the other songs on the album. This interface is just like what Spotify uses and is very familiar to users, which ensures limited learning time from users.

Solution

In order to solve this problem, I decided to utilize the AngularJS framework.

AngularJS is a structural framework for building dynamic web applications. It is not a library. So, the developer is expected to code following certain rules and guidelines laid out by the framework.

Angular is opinionated about how a dynamic web application should be built. And almost all of the opinions are backed by strong design principles and justifications. It also simplifies the application development process by abstracting a lot of the internal complexity and exposing only what the application developer needs to know.

This application was a perfect setup to use AngularJS and allowed me the opportunity to get my hands dirty with concepts like Controllers, Services, Directives, and what I think makes Angular so useful, Data Binding, the bread and butter of what makes AngularJS so powerful.

In almost all cases, setting up data binding requires some amount of coding to bind the view and model together. The way in which Angular approaches two-way binding is pretty cool and intuitive. It saves you from writing considerable amount of boiler-plate code.

The model acts as the single source of truth for all the data in your application. The data binding directives {{ }} provided by Angular binds the model to the DOM seamlessly.

The beauty of this lies in the simplicity that abstracts the internal complexity!

Results

Overall, this implementation was excellent. The results for the users is a well-constructed interface that is very familiar and simple to use. The code is well structured, clear, and concise. It is much easier to follow than if another solution, such as jQuery, was used.

Conclusion

While this project is fairly basic it still provides a great deal of learning for me, as well as a solid platform which could allow me to expand functionality in the future if so desired. Overall, I am pleased with the outcome of this application and the skills that I learned in creating it. As for AngularJS, I feel this has only whet my appetite to further explore how I can use this framework on other projects.

Click on the picture above to visit the application or visit here for the code.