Initial state

samples/angular/MusicStore/wwwroot/ng-app/components/public/home/home.html

@@ -0,0 +1,10 @@
+<div class="jumbotron">
+    <h1>MVC Music Store</h1>
+    <img src="/Images/home-showcase.png">
+</div>
+
+<ul class="row list-unstyled" id="album-list">
+    <li *ng-for="#album of mostPopular" class="col-lg-2 col-md-2 col-sm-2 col-xs-4 container">
+        <album-tile [albumData]="album"></album-tile>
+    </li>
+</ul>

samples/angular/MusicStore/wwwroot/ng-app/components/public/home/home.ts

@@ -0,0 +1,21 @@
+import * as ng from 'angular2/angular2';
+import { Http } from 'angular2/http';
+import { AlbumTile } from '../album-tile/album-tile';
+import * as models from '../../../models/models';
+ 
+@ng.Component({
+  selector: 'home'
+})
+@ng.View({
+  templateUrl: './ng-app/components/public/home/home.html',
+  directives: [ng.NgFor, AlbumTile]
+})
+export class Home {
+    public mostPopular: models.Album[];
+
+    constructor(http: Http) {
+        http.get('/api/albums/mostPopular').subscribe(result => {
+            this.mostPopular = result.json(); 
+        });
+    }
+}