Angular

提供: fukudat.net
2019年8月13日 (火) 23:01時点におけるFukudat (トーク | 投稿記録)による版 (→‎追加機能)
ナビゲーションに移動検索に移動

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 { }