页面

app/app-detail.component.css

@@ -5,7 +5,7 @@
 }
 
 md-sidenav {
-    width: 200px;
+    width: 240px;
 }
 
 .example-full-width {
@@ -23,3 +23,46 @@ h1 {
 #info-contents {
     margin-left: 8px;
 }
+
+md-sidenav h3 {
+    background: rgba(0,0,0,.32);
+    color: #fff;
+    border: none;
+    font-size: 10px;
+    letter-spacing: 1px;
+    line-height: 24px;
+    text-transform: uppercase;
+    font-weight: 400;
+    margin: 0;
+    padding: 0 16px;
+}
+
+md-sidenav li {
+    border-bottom: 1px solid;
+    margin: 0;
+    padding: 0;
+    border-color: rgba(0,0,0,.06);
+    color: rgba(0,0,0,.54);
+}
+md-sidenav li>a {
+    box-sizing: border-box;
+    display: block;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 47px;
+    text-decoration: none;
+    transition: all .3s;
+    padding: 0 16px;
+    position: relative;
+    color: rgba(0,0,0,.54);
+}
+md-sidenav li>a:hover {
+    background: #fafafa;
+    color: #00bcd4;
+}
+
+md-sidenav ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
\ No newline at end of file

app/app-detail.component.html

-<md-sidenav-container *ngIf="app">
-    <md-sidenav mode="side" opened="true">
-        <h3 md-subheader>信息中心</h3>
-        <md-nav-list>
-            <a md-list-item href="#">概览</a>
-        </md-nav-list>
-        <h3 md-subheader>编辑应用</h3>
-        <md-nav-list>
-            <a md-list-item href="#">详情</a>
-            <a md-list-item href="#">文件</a>
-        </md-nav-list>
-    </md-sidenav>
-    <div class="my-content">
-
  <div id="info">
         <div>
             <img src="https://lh6.ggpht.com/mUAFCY_JUfHQBlAE4JsnwyrghcxIldv-uk0iPPL66IpPxM8-KQCof6NN4usLm6LUpA=h80-rw" alt="喵帕斯~">
@@ -73,29 +59,3 @@
 
         <button md-raised-button color="primary">提交</button>
     </form>
\ No newline at end of file
-
-        <h3 md-subheader>语言</h3>
-
-        <md-tab-group>
-            <md-tab>
-                <template md-tab-label>
-                    The <em>best</em> pasta
-                </template>
-                <h1>Best pasta restaurants</h1>
-                <p>...</p>
-            </md-tab>
-            <md-tab>
-                <template md-tab-label>
-                    <md-icon>home</md-icon> The worst sushi
-                </template>
-                <h1>Terrible sushi restaurants</h1>
-                <p>...</p>
-            </md-tab>
-        </md-tab-group>
-
-        Main content
-        <!--<md-icon class="md-24 fa-lg" fontSet="fa" fontIcon="fa-trophy"></md-icon>-->
-    </div>
-</md-sidenav-container>
-
-<md-icon fontSet="fa" fontIcon="fa-square"></md-icon>
\ No newline at end of file

app/app-detail.component.ts

-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, Input} from '@angular/core';
 import App from '../models/app';
 import {AppService} from './app.service';
-import {ActivatedRoute, Params} from '@angular/router';
+import {ActivatedRoute} from '@angular/router';
 import 'rxjs/Rx';
 import {MdIconRegistry} from '@angular/material';
 import {DomSanitizer} from '@angular/platform-browser';
 
 @Component({
-    selector: 'app-detail',
     moduleId: module.id,
     templateUrl: 'app-detail.component.html',
     styleUrls: ['app-detail.component.css']
 })
 export class AppDetailComponent implements OnInit {
+    @Input()
     app: App;
 
     constructor(private appService: AppService, private route: ActivatedRoute, iconRegistry: MdIconRegistry, sanitizer: DomSanitizer) {
@@ -26,9 +26,11 @@ export class AppDetailComponent implements OnInit {
     }
 
     async ngOnInit() {
-        this.route.params
-            .switchMap((params: Params) => this.appService.getApp(params['id']))
-            .subscribe(app => this.app = app);
+        // this.route.params
+        //     .switchMap((params: Params) => this.appService.getApp(params['id']))
+        //     .subscribe(app => {
+        //         this.app = app;
+        //         this.locales = Object.keys(this.app.name);
+        //     });
     }
-
 }

app/mycard.module.ts

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

app/routing.module.ts

@@ -5,12 +5,21 @@ import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 import {AppsComponent} from './apps.component';
 import {AppDetailComponent} from './app-detail.component';
+import {AppComponent} from './app.component';
+import {AppLocaleComponent} from './app-locale.component';
 
 
 const routes: Routes = [
     {path: '', redirectTo: '/apps', pathMatch: 'full'},
     {path: 'apps', component: AppsComponent},
-    {path: 'apps/:id', component: AppDetailComponent}
+    {
+        path: 'apps/:id',
+        component: AppComponent,
+        children: [
+            {path: '', component: AppDetailComponent},
+            {path: 'locale', component: AppLocaleComponent}
+        ]
+    }
 ];
 
 @NgModule({

package.json

@@ -3,7 +3,8 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "start": "tsc && concurrently \"node server.js\" \"lite-server\"",
+    "prestart": "tsc",
+    "start": "concurrently \"node server.js\" \"lite-server\"",
     "tsc": "tsc",
     "lint": "tslint -e ./node_modules/** ./**/*.ts -t verbose",
     "migrate": "tsc && mongo-migrate --runMongoMigrate --config mongodb_config.json --dbPropName dbSettings"

systemjs.config.js

@@ -39,6 +39,12 @@
             },
             rxjs: {
                 defaultExtension: 'js'
+            },
+            models: {
+                defaultExtension: 'js'
+            },
+            db: {
+                defaultExtension: 'js'
             }
         }
     });