「Angular」の版間の差分
(→rxjs) |
(→追加機能) |
||
75行目: | 75行目: | ||
== 追加機能 == | == 追加機能 == | ||
− | + | === rxjs === | |
Angular アプリケーションから、外部の [https://ja.wikipedia.org/wiki/Ajax ajax] サービスを呼び出すライブラリ。 | Angular アプリケーションから、外部の [https://ja.wikipedia.org/wiki/Ajax ajax] サービスを呼び出すライブラリ。 | ||
2019年8月13日 (火) 23:01時点における版
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 { }