在Angular/Material2的入门指南中对于省略部分的补充说明

我曾经尝试开始使用Angular Material的Getting Started，虽然有接触过Angular 1.x版本，但对Angular 2和TypeScript都不是很了解，因此在补全被省略部分时遇到了困难。以下是我的备忘录，或者说是编辑日志。首先，我通过npm install -g @angular/cli安装了Angular CLI，然后执行了下面的脚本。这样一来，在执行的目录下创建了一个名为md-sample的AngularJS项目，并且安装了用于使用Material Design所需的必要组件和模块，还生成了一些组件和模块。

#!/bin/bash
ng new md-sample
cd md-sample
ng g component hello
ng g module hello
npm install --save @angular/material @angular/cdk
npm install --save @angular/animations hammerjs
echo "@import \"~@angular/material/prebuilt-themes/indigo-pink.css\";" >> ./src/styles.css

当脚本执行完成后，通过以下方式可以使用angular/material2。

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 46d517b..6969b8e 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -5,6 +5,7 @@
 </div>
+  <app-hello></app-hello>
 <h2>Here are some links to help you start: </h2>
 <ul>
   <li>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 72e57f2..042d98c 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,16 +1,19 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import 'hammerjs';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { HelloModule } from './hello/hello.module';

 import { AppComponent } from './app.component';
-import { HelloComponent } from './hello/hello.component';

 @NgModule({
   declarations: [
     AppComponent,
-    HelloComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    BrowserAnimationsModule,
+    HelloModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/hello/hello.component.html b/src/app/hello/hello.component.html
index 4fba6a4..11bfc96 100644
--- a/src/app/hello/hello.component.html
+++ b/src/app/hello/hello.component.html
@@ -1,3 +1,4 @@
 <p>
   hello works!
 </p>
+<button mat-raised-button>Hello</button>
diff --git a/src/app/hello/hello.component.ts b/src/app/hello/hello.component.ts
index a35d859..2761b61 100644
--- a/src/app/hello/hello.component.ts
+++ b/src/app/hello/hello.component.ts
@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-
 @Component({
   selector: 'app-hello',
   templateUrl: './hello.component.html',
diff --git a/src/app/hello/hello.module.ts b/src/app/hello/hello.module.ts
index 738882e..400d153 100644
--- a/src/app/hello/hello.module.ts
+++ b/src/app/hello/hello.module.ts
@@ -1,10 +1,13 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-
+import { HelloComponent } from './hello.component';
+import { MatButtonModule } from '@angular/material';
 @NgModule({
   imports: [
-    CommonModule
+    CommonModule,
+    MatButtonModule
   ],
-  declarations: []
+  exports: [HelloComponent],
+  declarations: [HelloComponent]
 })
 export class HelloModule { }

只需要一种选择：
执行ng serve后打开http://localhost:4200，如果按钮显示出来，则表示确认操作成功。

关于版本

$ ng --version
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.4.4
node: 6.11.2
os: darwin x64
@angular/animations: 4.4.4
@angular/cdk: 2.0.0-beta.12
@angular/common: 4.4.4
@angular/compiler: 4.4.4
@angular/core: 4.4.4
@angular/forms: 4.4.4
@angular/http: 4.4.4
@angular/material: 2.0.0-beta.12
@angular/platform-browser: 4.4.4
@angular/platform-browser-dynamic: 4.4.4
@angular/router: 4.4.4
@angular/cli: 1.4.4
@angular/compiler-cli: 4.4.4
@angular/language-service: 4.4.4
typescript: 2.3.4
$ npm --version
3.10.10