页面

app/app-create.component.css

+.example-full-width {
+    width: 100%;
+}
+md-select {
+    margin: 16px 0;
+}
+
+md-dialog-actions {
+    text-align: right;
+}
\ No newline at end of file

app/app-create.component.html

+<h1 md-dialog-title>创建应用</h1>
+
+<form class="example-form">
+    <md-dialog-content>
+        <md-input-container class="example-full-width">
+            <input md-input placeholder="应用 ID (创建应用后无法修改)" [(ngModel)]="id" name="id">
+        </md-input-container>
+
+        <md-select placeholder="主要语言" [(ngModel)]="locale" name="locale" class="example-full-width">
+            <md-option *ngFor="let l of locales" [value]="l">{{l}}</md-option>
+        </md-select>
+
+        <md-input-container class="example-full-width">
+            <input md-input placeholder="名称" [(ngModel)]="name" name="name">
+        </md-input-container>
+
+    </md-dialog-content>
+</form>
+
+<md-dialog-actions>
+    <button md-button md-dialog-close>取消</button>
+    <button md-button (click)="submit(id, locale, name)">确定</button>
+</md-dialog-actions>
\ No newline at end of file

app/app-create.component.ts

+/**
+ * Created by weijian on 2016/12/30.
+ */
+import {Component} from '@angular/core';
+import {MdDialogRef} from '@angular/material';
+import App from '../models/browserapp';
+@Component({
+    moduleId: module.id,
+    templateUrl: 'app-create.component.html',
+    styleUrls: ['app-create.component.css'],
+})
+export class AppCreateComponent {
+    locales = ['zh-CN', 'zh-TW', 'en-US', 'ja-JP'];
+
+    locale = 'zh-CN';
+    id: string;
+    name: string;
+    app = {name: {}};
+
+    constructor(public dialogRef: MdDialogRef<AppCreateComponent>) {
+    }
+
+    submit(id: string, locale: string, name: string) {
+        this.dialogRef.close(new App({id: id, name: {[locale]: name}}));
+    }
+}

app/apps.component.css

+.example-fab {
+    position: absolute;
+    right: 20px;
+    bottom: 20px;
+}
\ No newline at end of file

app/apps.component.html

@@ -8,4 +8,7 @@
             <span class="demo-2"> -- {{app.id}} </span>
         </p>
     </md-list-item>
-</md-nav-list>
\ No newline at end of file
+</md-nav-list>
+<button md-fab class="example-fab" (click)="create_app()">
+    <md-icon>add</md-icon>
+</button>
\ No newline at end of file

app/apps.component.ts

 import {Component, OnInit} from '@angular/core';
 import App from '../models/app';
 import {AppService} from './app.service';
+import {MdDialog} from '@angular/material';
+import {AppCreateComponent} from './app-create.component';
 
 @Component({
     selector: 'apps',
@@ -11,7 +13,7 @@ import {AppService} from './app.service';
 export class AppsComponent implements OnInit {
     apps: App[];
 
-    constructor(private appService: AppService) {
+    constructor(private appService: AppService, private dialog: MdDialog) {
     }
 
     async ngOnInit() {
@@ -21,5 +23,13 @@ export class AppsComponent implements OnInit {
     async getApps() {
         this.apps = await this.appService.getApps();
     }
-}
 
+    async create_app() {
+        let dialogRef = this.dialog.open(AppCreateComponent);
+        let app: App | undefined = await dialogRef.afterClosed().toPromise();
+        if (!app) {
+            return;
+        }
+        console.log(app);
+    }
+}

app/mycard.module.ts

@@ -21,14 +21,17 @@ import {AppDetailComponent} from './app-detail.component';
 import {AppComponent} from './app.component';
 import {AppLocalesComponent} from './app-locales.component';
 import {AppPackagesComponent} from './app-packages.component';
+import {AppCreateComponent} from './app-create.component';
 
 
 @NgModule({
     imports: [
         BrowserModule, MaterialModule.forRoot(), FormsModule, RoutingModule, HttpModule,
     ],
-    declarations: [AppsComponent, MyCardComponent, AppComponent, AppDetailComponent, AppLocalesComponent, AppPackagesComponent],
+    declarations: [AppsComponent, MyCardComponent, AppComponent, AppDetailComponent, AppLocalesComponent, AppPackagesComponent,
+        AppCreateComponent],
     bootstrap: [MyCardComponent],
+    entryComponents: [AppCreateComponent],
     providers: [AppService, MdIconRegistry],
 })
 export class AppModule {