AngularJSでAjaxリクエスト中にLoading画像を表示 | Webエンジニアブログ

カスタムDirectiveを利用して画面遷移中にoverlay表示 AngularOverlay Directive CakePHPをバックエンドとしたRestfulなAngularJSのサンプルアプリを開発している。 前回のエントリー、AngularJSの$routeProviderでURLをマッピングの記事でCRUD操作が可能な状態になった。本エントリーでは、Ajaxリクエストが発生する画面遷移のたびに、画面ロード中の表示をするように変更してみたい。 完成系は画像のようになった。 画像では、Ajaxリクエスト中に画面をoverlay表示に切り替えて、Loadingの表示を行っている。そして、処理が完了するとモーダル画面から元に戻る。この処理は、AngularJSがhttpリクエストにoverlay表示をフックすることで実現しており、そのカスタムDirectiveがgithubで公開され