The Spotyngular Project: Part 4 – Template Syntax & Data Persistence
This is the fifth post of “The Spotyngular Project” series of posts. Throughout this series, we are cloning spotify with AngularJS 2 to expose this framework’s benefits and tricks. We started our first post by talking about the basics of Angular JS 2, then we set up the environment, we got started with the demo and focused on the structure. Now we’ll go over the syntax of AngularJS 2 templating feature.
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.
MusicStrip
The musicStrip component has a carousel that displays featured playlists with cards. Inside musicStrip there will be another component called Big Card that will display information about the playlists.
We will begin with a simplest version and then we will start to fill in more complex behavior.
Simple Version
Let’s get started with the template. Here we have a placeholder for the title and then a row where all the spotyngular-browse-big-card elements will be laid out. In this first iteration we will only have one spotyngular-browse-big-card element but this will change pretty soon.