気ままなタンス*プログラミングなどのノートブック

プログラミングやRPGツクール、DTM等について、学んだことや備忘録をアウトプットとして残し、情報を必要としている誰かにとって「かゆいところに手が届く」ブログとなることを願いながら記事を書いています。

トップ > Angular > 【Laravel】【Angular】Laravel+AngularでTodoアプリを作りながら勉強した

【Laravel】【Angular】Laravel+AngularでTodoアプリを作りながら勉強した

Angular Laravel Todoアプリ

スポンサーリンク

数日前から、簡単なTODOアプリを作りながら勉強してました

作ったもの

f:id:rinne_grid2_1:20180326004537p:plain

  • 実装済み
    • TODOの参照
    • TODOの登録
    • TODOの更新
  • 未実装
    • TODOの削除
    • ユーザごとのTODO管理

ソースコード

Githubに置いてます。

https://github.com/rinne-grid/my-angular-and-laravel-todo-app

便利だったもの

UI系のライブラリ

@ng-bootstrap/ng-bootstrap
  • Bootstrap4のAngularコンポーネントが利用できるライブラリ

ライブラリのうち、モーダルウィンドウを開閉するためのNgbModalやNgbModalRefを利用しました。 モーダルを閉じる方法がわからず、ハマりそうになりましたが・・・ stack overflowのページのおかげでNgbModalRefを利用すればよいとわかりました。

stackoverflow.com

NgbModalでopenして戻ってきたオブジェクトをNgbModalRefのインスタンスで保持して、 モーダルウィンドウを操作（close）する

Loading.ioのloading.cssとloading-btn.css
  • 登録処理の実行中などにボタンに対して、Loading効果を付与できるCSSライブラリ

Loading Buttons / Pure CSS Button that Loads

下記のようなフィールドを用意しておいて、 ngClassディレクティブで、バインディングしておき、リクエスト処理前と処理後に切り替えを行うだけで、Loading効果を付与することができて便利でした。

  loadingControl = {
    "ld": true,
    "ld-ring": false,
    "ld-spin": false,
    "running": false
  };

<button type="button" class="btn btn-primary" 
  (click)="...省略">保存
  <div [ngClass]="loadingControl"></div>                  
</button>

CORS(Cross-Origin Resource Sharing)対応

barryvdh/laravel-cors

GitHub - barryvdh/laravel-cors: Adds CORS (Cross-Origin Resource Sharing) headers support in your Laravel application

  • Laravelのミドルウェアに追加され、CORSヘッダーを送信する

nginxやApache等のサーバーの設定変更を行うことなく、（クライアントが）ドメインの異なる相手と通信可能になる

composerによるインストール、Providerへの追加（Laravel5.5以降なら、Package Discoveryにより手動追加不要） ミドルウェアへの追加、設定ファイルの出力、設定ファイルへの追記といった形で、 導入方法に従い設定を行うだけで、CORSヘッダーを送信してくれるようになって（この表現であってるかどうか自信ないですが・・・）便利です。 （CSRFトークンチェックの対象外とする設定も忘れずに行う必要がありますね）

LaravelとAngularとのpostによるデータ登録を実装する際、 CORS設定関係でハマってしまい、10時間くらい無駄にしてしまいました。 （結局は自分が書いたAngular側のコードのせいでした。withCredentialsをfalseにしたらいけましたが、根本解決にはなってないような気がしています）

API検証

Postman
  • APIサーバに対して各種HTTPリクエストを送信できる超便利なツール

www.getpostman.com

ローカルに立てたLaravel開発サーバーに対して、Postmanからリクエストを送信して、 意図したデータ（jsonや、var_exportの結果やら）が返ってきているかを瞬時で確認できるので素晴らしいです・・・！ パラメータの追加も可能で、GET・POSTだけでなく、PUT、PATCH、DELETE等も検証できます。

友人のゆうきゃんくん（@ucan_lab）が教えてくれました。 （なお、postmanを利用した感想を伝えたら、「まだ俺使ってないよ！」とのことでした。）

学んだこと

Angular

  • .angular-cli.jsonへの追記
    • .angular-cli.json内のstylesやscriptsにnpmやyarn経由でインストールしたCSSフレームワーク等やJSファイルを指定しておくと、ビルド時にまとめてくれるので便利
  • APIの向け先等、開発、本番時で分けたいものがある場合の対応
    • environments直下のファイルにそれぞれ記載する。
    • 利用時にはenviromnemts/environmentをimportすると環境に応じて（ngコマンドで実行した環境によって）向け先等が適切に変わってくれる。
// src/environments/environment.ts
export const environment = {
  production: false,
  API_SERVER: 'http://localhost:8000/api/'
};

// src/environments/environment.prod.ts
export const environment = {
  production: true,
  API_SERVER: 'http://xxxx/api/'
};

# API_SERVERはhttp://localhost:8000/api/
$ ng serve -e dev
# API_SERVERはhttp://xxxx/api/
$ ng serve -e prod
  • @angular/common/http/HttpClientでputも送信可能
    • Laravel側のupdateアクションについて、Route::resourceを利用しているため、updateの際はputでリクエストを送る必要があった
  • ngClassディレクティブの使い方
    • loadingの部分でも触れたところ。有効にしたいクラス名とtrue/falseの指定を行いつつ、テンプレート側で[ngClass]で指定する
  • todoリストを表示するngForでtrackByを指定し、再描画時に変更があったTodoのみに反映
  • テンプレート側において、ngFor="let obj of anyList"でループを回す
    • 上記のobjはイベントバインディング等で呼び出すメソッドの引数に指定することで、リストのうち、（上記例ではclickしたDOMに）ひもづく値を渡すことができる

色々と殴り書きで、曖昧な部分（適切な言葉の選択ができていない）があるかもしれません。。

CORSでハマった後はわりとすんなりと実装を進められ楽しかったです。