開発覚書はてな版

個人的な開発関連の備忘録

Angular

【VSCode】おすすめ拡張機能 - Angular Language Service

概要 Visual Studio Code で普段利用している拡張機能ご紹介です。 今回はAngular Language Serviceです。 Angular Supportと同様にHTMLからTypeScriptの定義に飛ぶことが可能です。(TypeScriptからHTMLへ飛ぶことは不可) 基本的にはHTML側の開発サポート…

【VSCode】おすすめ拡張機能 - Angular Support

概要 Visual Studio Code で普段利用している拡張機能ご紹介です。 今回はAngular Supportです。 Angular Language Serviceと重複している箇所がありますが、HTML・TypeScriptの双方から定義に飛ぶことができる拡張機能です。 marketplace.visualstudio.com

【Angular】Angular 7.0.0リリース

概要 Angular 7.0.0がリリースされましたね。 あまり大きな機能追加はありませんが、気になった箇所をピックアップしていきます。 ちなみに次世代レンダリングパイプラインのIvyは含まれていません・・・ blog.angular.io github.com

【Angular】IE11用number Directive

概要 IE11では<input type="number">を指定しても数値以外の入力が可能です。 今回はDirectiveを使用して数値のみを入力する共通処理を実装したいと思います。

【Angular】双方向バインディングの実装(ControlValueAccessor使用版)

概要 今回はControlValueAccessorを使用した双方向バインディングの実装の仕方を記載します。 通常の双方向バインディングの実装については以下の記事を参照して下さい。 kakkoyakakko2.hatenablog.com

【Angular】双方向バインディングの実装

概要 自作コンポーネントで双方向バインディングの実装の仕方を記載します。 ※今回はControlValueAccessorは未使用で実装します。 下記のような設定をします。 自作コンポーネント @Inputでプロパティを定義する。 @OutputでEventEmitterを定義する。EventEm…

【Angular】KeyValuePipe の使い方

概要 Angular 6.1.0になりKeyValuePipeが追加されました。 KeyValuePipeのサンプルを作ってみたいと思います。 以下はAngular 6.1をピックアップした記事です。 kakkoyakakko2.hatenablog.com

【Angular】Angular 6.1.0リリース

概要 Angular 6.1.0がリリースされましたね。マイナーバージョンチェンジなのであまり大きな変更はありませんが、気になった箇所をピックアップしていきます。 blog.angular.io github.com

【Angular】Angular Seed から Angular CLI へ移行(ビルド・テスト編)

概要 Angular SeedというGulpを利用して独自にビルド環境を構築しているプロジェクトがあります。その環境をAngular CLIに移行する際のメモ等を記載していきます。 今回はビルドとテストの移行を記載します。 詳細は以下のプロジェクトをご確認ください。 gi…

【イベント参加】HTML5 APP CONFERENCE 2018に参加してきました

概要 HTML5 APP CONFERENCE 2018に参加してきました。 PWA・ハイブリッドアプリ等のHTML5関連技術の話しがメインでした。 html5app-conf.connpass.com 全体的な感想 Ionicの導入事例が聞けて個人的にはよかった。(Ionic2での開発経験があるため) Ionic チー…

【Angular】@Componentの設定あれこれ

概要 Angularの@Componentの設定関連をメモ。

【TypeScript】拡張メソッドの実装(ライブラリ・外部モジュール編)

概要 TypeScriptで基本型でなく、他のライブラリで定義されているクラスに対して拡張メソッドを実装する方法を記載します。 declare module 'ライブラリの拡張対象のクラスが記載されているファイル'で定義後は基本型の拡張方法と同じです。 サンプルソース…

【Angular】HttpClientでstatusCodeを取得する

概要 Angular 4以降で登場したHttpClientでは特に指定がない場合はJSON型の戻り値を扱います。 以前のHttpモジュールのようにHttpレスポンスのステータスコードを扱いたい場合は、引数に{ observe: 'response' }の指定が必要になります。 get処理については…

【Angular】HttpInterceptorの実行順序

概要 HttpInterceptorを複数登録した場合の実行順序は以下の通りです。 リクエストはproviders登録の昇順、レスポンスはproviders登録の降順に実行されます。 AInterceptor, BInterceptorの順で登録した場合、 Aのリクエスト前処理 Bのリクエスト前処理 Bの…

【Angular】HttpInterceptorの実装(レスポンス内容確認)

概要 以前紹介したAngularのHttpInterceptorでレスポンス内容を確認することも出来ます。 今回はそのサンプルソースをのせておきます。 kakkoyakakko2.hatenablog.com

【イベント参加】ng-japan2018に参加してきました

概要 ng-japan 2018に参加してきました。 ngjapan.org 基本的には6.0の新機能をベースに話があったり、導入・開発の事例の話があったりしました。 以下に感想等を記載していきます。 全体的な感想 build環境が成熟してきた。(ng add/ng update) Angular ivy…

【Angular CLI・Karma】JUnit形式のテスト結果を出力する

概要 Angular CLI利用時にKarmaでのテスト実行時にテスト結果をJUnit形式で出力する方法です。 なぜJUnit形式でテスト結果を出力するかというとJenkins等でテスト結果を取り込むのにJUnit形式だと簡単に出来るからです。 今回利用するツールはkarma-junit-re…

【Angular】HttpInterceptorの実装(Cookieベースセッション編)

概要 AngularのHttpリクエストの前後に共通処理を実装したい場合、HttpInterceptorを実装することで対応することが可能です。 用途としては以下のケースがありそうです。 ログ出力 HTTPヘッダーにトークンを設定 今回は前回の記事で紹介したAngularでのCooki…

【Angular】Cookieベースのセッション管理を実施

概要 AngularのHttpClient利用時は標準ではCookieベースのセッション管理が出来ません。 旧システムの認証ではCookieベースのセッション管理が必要になる場合があります。 対応方法としてはget、post等のメソッドの引数に withCredentials: true を設定する…