edit

app/app-detail.component.css

+.my-content {
+    min-height: 1000px;
+}
+
+md-sidenav {
+    width: 200px;
+}
+
+.example-full-width {
+    width: 100%;
+}
\ No newline at end of file

app/app-detail.component.html

+<md-sidenav-container *ngIf="app">
+    <md-sidenav mode="side" opened="true">
+        <md-nav-list>
+            <a md-list-item href="#">详情</a>
+            <a md-list-item href="#">文件</a>
+        </md-nav-list>
+    </md-sidenav>
+    <div class="my-content">
+
+        <h3 md-subheader>基本信息</h3>
+        <form class="example-form">
+            <md-input-container class="example-full-width">
+                <input md-input name="id" placeholder="ID" disabled [(ngModel)]="app.id">
+            </md-input-container>
+
+            <md-input-container class="example-full-width">
+                <input md-input name="name" placeholder="First name" [(ngModel)]="app.name['zh-CN']">
+            </md-input-container>
+
+            <p>
+                <md-input-container class="example-full-width">
+                    <textarea md-input placeholder="Address">1600 Amphitheatre Pkwy</textarea>
+                </md-input-container>
+                <md-input-container class="example-full-width">
+                    <textarea md-input placeholder="Address 2"></textarea>
+                </md-input-container>
+            </p>
+
+            <table class="example-full-width" cellspacing="0"><tr>
+                <td><md-input-container class="example-full-width">
+                    <input md-input placeholder="City">
+                </md-input-container></td>
+                <td><md-input-container class="example-full-width">
+                    <input md-input placeholder="State">
+                </md-input-container></td>
+                <td><md-input-container class="example-full-width">
+                    <input md-input #postalCode maxlength="5" placeholder="Postal Code" value="94043">
+                    <md-hint align="end">{{postalCode.value.length}} / 5</md-hint>
+                </md-input-container></td>
+            </tr></table>
+        </form>
+
+
+
+
+        Main content
+    </div>
+</md-sidenav-container>
\ No newline at end of file

app/app-detail.component.ts

+import {Component, OnInit} from '@angular/core';
+import App from '../models/app';
+import {AppService} from './app.service';
+import {ActivatedRoute, Params} from '@angular/router';
+import 'rxjs/Rx';
+
+@Component({
+    selector: 'app-detail',
+    moduleId: module.id,
+    templateUrl: 'app-detail.component.html',
+    styleUrls: ['app-detail.component.css']
+})
+export class AppDetailComponent implements OnInit {
+    app: App;
+
+    constructor(private appService: AppService, private route: ActivatedRoute) {
+    }
+
+    async ngOnInit() {
+        this.route.params
+            .switchMap((params: Params) => this.appService.getApp(params['id']))
+            .subscribe(app => this.app = app);
+    }
+
+}

app/app.service.ts

@@ -12,9 +12,10 @@ export class AppService {
     }
 
     getApps(): Promise<App[]> {
-        return this.http.get('http://localhost:8000/apps').map((response) => {
-            console.log({"id":"byabyabya"});
-            return [<App>{"id":"byabyabya"}]
-        }).toPromise();
+        return this.http.get('http://localhost:8000/apps').map((response) => response.json()).toPromise();
+    }
+
+    getApp(id: string): Promise<App> {
+        return this.http.get(`http://localhost:8000/apps/${id}`).map((response) => response.json()).toPromise();
     }
 }

app/apps.component.html

-<md-list *ngIf="apps">
-    <md-list-item *ngFor="let app of apps">
+<md-nav-list>
+    <h3 md-subheader>所有应用</h3>
+    <md-list-item *ngFor="let app of apps" [routerLink]="app.id">
         <img md-list-avatar src="https://mycard.moe/logo.png" alt="...">
         <h3 md-line> {{app.id}} </h3>
         <p md-line>
@@ -7,4 +8,4 @@
             <span class="demo-2"> -- {{app.id}} </span>
         </p>
     </md-list-item>
-</md-list>
+</md-nav-list>
\ No newline at end of file

app/apps.component.ts

@@ -3,7 +3,7 @@ import App from '../models/app';
 import {AppService} from './app.service';
 
 @Component({
-    selector: 'app',
+    selector: 'apps',
     moduleId: module.id,
     templateUrl: 'apps.component.html',
     styleUrls: ['apps.component.css']

app/mycard.component.css

+:host {
+    padding-top: 64px;
+}
\ No newline at end of file

app/mycard.component.html

 <md-toolbar color="primary">
     <a md-button routerLink="/">MyCard 开发者控制台</a>
     <a md-button routerLink="/apps">应用</a>
-    <a md-button routerLink="/apps">捆绑包</a>
+    <a md-button routerLink="/bundles">捆绑包</a>
 </md-toolbar>
 <router-outlet></router-outlet>
\ No newline at end of file

app/mycard.module.ts

@@ -20,13 +20,14 @@ import 'rxjs/add/operator/do';
 import 'rxjs/add/operator/filter';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/switchMap';
+import {AppDetailComponent} from "./app-detail.component";
 
 
 @NgModule({
     imports: [
         BrowserModule, MaterialModule.forRoot(), FormsModule, RoutingModule, HttpModule,
     ],
-    declarations: [AppsComponent, MyCardComponent],
+    declarations: [AppsComponent, MyCardComponent, AppDetailComponent],
     bootstrap: [MyCardComponent],
     providers: [AppService],
 })

app/routing.module.ts

 /**
  * Created by weijian on 2016/12/30.
  */
-import { NgModule }             from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
 import {AppsComponent} from './apps.component';
+import {AppDetailComponent} from './app-detail.component';
 
 
 const routes: Routes = [
-    { path: '', redirectTo: '/apps', pathMatch: 'full' },
-    { path: 'apps',  component: AppsComponent},
+    {path: '', redirectTo: '/apps', pathMatch: 'full'},
+    {path: 'apps', component: AppsComponent},
+    {path: 'apps/:id', component: AppDetailComponent}
 ];
 
 @NgModule({
-    imports: [ RouterModule.forRoot(routes) ],
-    exports: [ RouterModule ]
+    imports: [RouterModule.forRoot(routes)],
+    exports: [RouterModule]
 })
-export class RoutingModule {}
+export class RoutingModule {
+}
 
 
 /*