Cloning Spotify with Angular 2

Complete serie of articles about Angular 2. Cloning @Spotify with Angular2  @angularjs

  • AngularJS 2 keeps close ties with web standards such as Web Components.
  • We will add AngularJS, create our first AngularJS 2 component, setting up SystemJS and finally add the missing dependencies with NPM
  • We will also see how to implement routing in AngularJS 2.
  • Part 2 – Adding AngularJS, SystemJS & NPM
  • AngularJS 2 has changed the syntax of its templating feature.

A complete guide to Angular 2 where we create a clone of the stream music service Spotify

@iranfleitas: Complete serie of articles about Angular 2. Cloning @Spotify with Angular2 @angularjs

A few weeks ago in the first Angular meetup in Uruguay, I did an introduction to the fantastic world of Angular 2. To stay away of a fancy presentation I cloned the stream music service Spotify from scratch using Angular 2. There are a video filmed and I have wrote a serie of articles explaining how to clone Spotify with Angular 2.

You can find the demo application in Github and you are free to contribute, use it for futures demos, etc. Enjoy it

The demo application was named Spotyngular, without more descriptions I invite you to enjoy it as much as I did it. We will release 7 posts in total, two articles per week, so very soon will be ready all the posts and hoping that you like it.

Talking about the basics of AngularJS 2 is the first step into “The Spotyngular Project”. This project will be presented through a series of posts where I’ll be explaining how to create a clone of the well-known music streaming service Spotify. What for? To show how AngularJS 2 new features interact with each other and expose the benefits and tricks of this framework latest version…

One of the first question that comes up when we start with a new framework or tool is how to install it. I will iterate over the 4 most used ways to start using AngularJS, then continue with requirements and some other key topics…

Once that our environment is already let’s begin our first steps. Here we will add AngularJS, create our first AngularJS 2 component, setting up SystemJS and finally add the missing dependencies with NPM…

AngularJS 2 keeps close ties with web standards such as Web Components. The idea, when developing an application with this new version, is to create a tree of Web Components where those components can communicate with each other. But what’s a Web Component, anyway?…

AngularJS 2 has changed the syntax of its templating feature. The goal of the change is to give more meaning to the structures we define. Another important difference is that one-way bindings are prefered over two-way bindings between model and view, by default, thus enhancing performance.

Let’s go over two Spotyngular’s components that use the new syntax…

In this post we will create an example service that will retrieve data from the database. We did it before with the MusicStrip component but we know it is not good to access data from within a Component, so we will create a layer of abstraction to access the data using this service.

We will also see how to implement routing in AngularJS 2. To do so we will be routing from a card to a playlist…

This video was the result of an interview by Iang Yim (@iangyim), where I show all the demo project. The video is in Spanish, will be subtitled soon.

Cloning Spotify with Angular 2