「Angular」の版間の差分

提供: fukudat.net
ナビゲーションに移動検索に移動
148行目: 148行目:
 
export class AppModule { }
 
export class AppModule { }
 
</pre>
 
</pre>
 +
 +
== Tips ==
 +
 +
=== 条件付き要素 ===
 +
ある条件が成り立っている場合にのみ表示される HTML要素が作りたいときは、<code>*ngIf</code>を使う。
 +
 +
コンポーネントのスニペット
 +
<pre>
 +
...
 +
export class XxxComponent implements OnInit {
 +
  flag: boolean;  // この値が True のとき、要素が表示される。
 +
  ...
 +
}
 +
</pre>
 +
 +
テンプレートのスニペット
 +
<pre>
 +
...
 +
<div *ngIf="flag">
 +
  this.flag が true のときのみ表示
 +
</div>
 +
<div *ngIf="!flag>
 +
  this.flag が false のときのみ表示
 +
</div
 +
</pre>
 +
 +
さらに、条件が成り立っているときと成り立っていないときに、表示されるHTML要素を切り替えることもできる。
 +
 +
=== 繰り返し要素 ===
 +
コンポーネントの属性が配列(ここでは array とする)があった時、その要素ごとに HTML要素が作りたいときは <code>*ngFor</code>を使う。
 +
例えば、<nowiki><list> (<ul>, <ol>)</nowiki>の中の<nowiki><li></nowiki>とか、<nowiki><table></nowiki>の中の<nowiki><tr></nowiki>など。
 +
 +
コンポーネント (xxx.component.ts) のスニペット
 +
<pre>
 +
export class XxxComponent implements OnInit {
 +
  array: SomeClass[];  // 繰り返しを作るデータ。型はなんでもよい。
 +
}
 +
</pre>
 +
 +
テンプレート (xxx.component.html) のスニペット
 +
<pre>
 +
<ul>
 +
<li *ngFor="let element of array">{{ element.field }}
 +
</ul>
 +
</pre>
 +
 +
綺麗なテーブルは[[#table|table]]参照。
  
 
[[Category:Programming]]
 
[[Category:Programming]]

2019年8月13日 (火) 23:19時点における版

Angularを使ったweb application作成の備忘録

Install

Mac OS

brew で node.js, npm をインストール.

$ brew install npm

npm で angular/cli をインストール.

$ npm install --global @angular/core

Upgrade to version 7 or later

https://www.techiediaries.com/updating-angular-cli-projects/ を参考。

Version 7.x.x にあげる場合、以下を実行する。

$ ng update @angular/cli@7 @angular/core@7

最新版にあげるなら、

$ ng update @angular/cli @angular/core

コマンドリファレンス

プロジェクトを新規作成

$ ng new "アプリケーション名"
$ cd "アプリケーション名"

カレントディレクトリの下に "アプリケーション名"というディレクトリができる. src/app/ ディレクトリの下にソースコードのテンプレートが作られる.

コンポーネントを作る

https://angular.jp/cli/generate を参照。

$ ng generate component コンポーネント名

src/app/コンポーネント名 ディレクトリの下にソースコードのテンプレートが作られる.

例えば、HelloWorld という名前のコンポーネントを作ると、src/app/hello-world というディレクトリが作成され、その下に hello-world.component.{ts|html|css|spec.ts} というファイルが作られる。 これらのファイルを src/appの直下に作りたい場合は,--flat オプションを付ける.

サービスを作る

https://angular.jp/cli/generate を参照。

$ ng generate service サービス名

src/app ディレクトリの下にソースコードのテンプレートが作られる.

例えば、FileSystem というサービスを作ると、src/appディレクトリの下に file-system.service.{ts|spec.ts} というファイルが作られる。

開発用サーバーを起動する

https://angular.jp/cli/serve を参照。

$ ng serve

デプロイ用にビルドする

https://angular.jp/cli/build を参照。

$ ng build --base-href='/デプロイするサーバー上のpath/' --prod --aot

dist ディレクトリの下のファイルをサーバー上にデプロイする.

追加機能

rxjs

Angular アプリケーションから、外部の ajax サービスを呼び出すライブラリ。

アプリケーションディレクトリに移動して、以下のようにインストール。

$ npm install rxjs rxjs-compat

src/app/app.module.ts に以下を追加。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// ↓追加
import { HttpClientModule } from '@angular/common/http';
// ↑追加

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    // ↓追加
    HttpClientModule,
    // ↑追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Material

テーブルとかポップアップとかアニメーションとかを使いたい時は、https://material.angular.io/ の get started にしたがって angular/material をインストール。

$ npm install --save @angular/material @angular/cdk @angular/animations

src/app/app.module.ts に使いたいモジュールを追加。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// ↓追加
import { MatTableModule } from '@angular/material/table';
import { MatProgressSpinnerModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// ↑追加

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    // ↓追加
    MatTableModule,
    MatProgressSpinnerModule,
    BrowserAnimationsModule,
    // ↑追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Tips

条件付き要素

ある条件が成り立っている場合にのみ表示される HTML要素が作りたいときは、*ngIfを使う。

コンポーネントのスニペット

...
export class XxxComponent implements OnInit {
  flag: boolean;  // この値が True のとき、要素が表示される。
  ...
}

テンプレートのスニペット

...
<div *ngIf="flag">
  this.flag が true のときのみ表示 
</div>
<div *ngIf="!flag>
  this.flag が false のときのみ表示
</div

さらに、条件が成り立っているときと成り立っていないときに、表示されるHTML要素を切り替えることもできる。

繰り返し要素

コンポーネントの属性が配列(ここでは array とする)があった時、その要素ごとに HTML要素が作りたいときは *ngForを使う。 例えば、<list> (<ul>, <ol>)の中の<li>とか、<table>の中の<tr>など。

コンポーネント (xxx.component.ts) のスニペット

export class XxxComponent implements OnInit {
  array: SomeClass[];   // 繰り返しを作るデータ。型はなんでもよい。
}

テンプレート (xxx.component.html) のスニペット

<ul>
<li *ngFor="let element of array">{{ element.field }}
</ul>

綺麗なテーブルはtable参照。