Initial state

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

@@ -0,0 +1,30 @@
+<nav class="navbar navbar-inverse navbar-fixed-top">
+    <div class="container">
+        <div class="navbar-header">
+            <a class="navbar-brand" [router-link]="['/Home']">Music Store</a>
+        </div>
+        <div class="collapse navbar-collapse">
+            <ul class="nav navbar-nav">
+                <li><a [router-link]="['/Home']">Home</a></li>
+                <li class="dropdown">
+                    <a class="dropdown-toggle" data-toggle="dropdown">Store <b class="caret"></b></a>
+                    <ul class="dropdown-menu">
+                        <li *ng-for="#genre of genres">
+                            <a title="{{ genre.Description }}" [router-link]="['/Genre', { genreId: genre.GenreId }]">
+                                {{ genre.Name }}
+                            </a>
+                        </li>
+                        <li class="divider"></li>
+                        <li>
+                            <a [router-link]="['/GenresList']">More…</a>
+                        </li>
+                    </ul>
+                </li>
+                <li><a [router-link]="['/Admin/Albums']">Admin</a></li>
+            </ul>
+        </div>
+    </div>
+</nav>
+<div class="container body-content">
+    <router-outlet></router-outlet>
+</div>

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

@@ -0,0 +1,35 @@
+import * as ng from 'angular2/angular2';
+import * as router from 'angular2/router';
+import { Http, HTTP_BINDINGS } from 'angular2/http';
+import { Home } from '../public/home/home';
+import { AlbumDetails } from '../public/album-details/album-details';
+import { GenreContents } from '../public/genre-contents/genre-contents';
+import { GenresList } from '../public/genres-list/genres-list';
+import { AdminHome } from '../admin/admin-home/admin-home';
+import * as models from '../../models/models';
+
+@ng.Component({
+    selector: 'app'
+})
+@router.RouteConfig([
+    { path: '/', component: Home, as: 'Home' },
+    { path: '/album/:albumId', component: AlbumDetails, as: 'Album' },
+    { path: '/genre/:genreId', component: GenreContents, as: 'Genre' },
+    { path: '/genres', component: GenresList, as: 'GenresList' },
+    { path: '/admin/...', component: AdminHome, as: 'Admin' }
+])
+@ng.View({
+    templateUrl: './ng-app/components/app/app.html',
+    styleUrls: ['./ng-app/components/app/app.css'],
+    directives: [router.ROUTER_DIRECTIVES, ng.NgFor]
+})
+export class App {
+    public genres: models.Genre[];
+
+    constructor(http: Http) {
+        http.get('/api/genres/menu').subscribe(result => {
+            this.genres = result.json();
+        });
+    }
+}
+

samples/angular/MusicStore/wwwroot/ng-app/components/app/bootstrap.ts

@@ -0,0 +1,6 @@
+import * as ng from 'angular2/angular2';
+import * as router from 'angular2/router';
+import { Http, HTTP_BINDINGS } from 'angular2/http';
+import { App } from './app';
+
+ng.bootstrap(App, [router.ROUTER_BINDINGS, HTTP_BINDINGS, ng.FormBuilder]);