angular/material2のgetting startedで省略されている部分の補足
5872 ワード
Angular MaterialのGetting Startedをしようとしたのですが、angular1系は触ったことはあるのですがangular2もtype scriptも詳しくないので、省略されている部分を自分で補うのに苦労しました。これがそのメモというか、編集ログになります。angular cliはnpm install -g @angular/cliで導入してから、次のシェルスクリプトを実行します。すると、実行したディレクトリ内にmd-sampleというangularjsのプロジェクトが作られて、マテリアルデザインを利用するためにとりあえず必要なものがインストールされたり、コンポーネント、モジュールが生成されます。
#!/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を開いてボタンが表示されればOKです。
バージョンについて
$ 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
Author And Source
この問題について(angular/material2のgetting startedで省略されている部分の補足), 我々は、より多くの情報をここで見つけました https://qiita.com/nnabeyang/items/d776a423e9cd0476b100著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .