君は心理学者なのか?

大学時代に心理学を専攻しなぜかプログラマになった、サイコ(心理学)プログラマかろてんの雑記。

Angular2

Angularを使って、カートで商品を選択する画面を作ってみた〜親子コンポーネント・サービス間連携をしてみる〜

Angularの復習をしようと思った 今回の開発で、Angularを使った。 基本フロント側は一人で開発をしていたが、 1画面で扱っているコンポーネントの数が600個をこえたり、 画面間で引き継ぐ項目がどんどん増えてきたりで、 だんだん大変なことになってきた。 …

Angular2/4にてbootstrapのmodalウィンドウを開き、閉じた時に親コンポーネントに値を反映させる

Angular2/4を使ってmodalウィンドウを表示する bootstrap標準のmodalウィンドウを、 Angularから開こうと頑張った話です。 bootstrapとAngular以外は使っておりません。 Angular2/4を使ってmodalウィンドウを表示する 0. 準備 0-1. プロジェクトの作成 0-2. …

Angular2/4のngOnChangesはオブジェクトプロパティが変わったことを検知しない〜Lifecycle HooksのngOnChages, ngDoCheckの違い〜

ngOnChangesを使って、子に渡したプロパティが変わったことを検知する 親コンポーネント /** app.component.ts */ export class AppComponent { public datas = 1; onClick() { this.datas ++; } } <button (click)="onClick()">押してください</button> <app-child [parentProperty]='datas'></app-child> 子コンポーネント

Angular2/4の*ngIfと[hidden]の使い分け/違い〜Component自体は削除せず非表示にするにはどうしたらよいか〜

結論 *ngIfを使うとComponent自体消えてしまうが、 [hidden]を使うと非表示になるだけでComponentはそのまま残る。 *ngIfの場合 <app-sample *ngIf="showFlg"></app-sample> [hidden]の場合 <app-sample [hidden]="showFlg"></app-sample> いきさつ Angular2/4にて、こんなことがあった 2つのComponentA、ComponentBがある タブAがアクティブの時Co…

Angular2/4にてjQueryを読み込んで使用する

Angular2/4にてjQueryを使いたい どうしても使いたいときってありますよね。 Angular2/4にてjQueryを使いたい 0. プロジェクトを立ち上げる 1. index.htmlファイルにてjQueryを読み込む 2. AppComponentにて「アンビエント宣言」をする 3. app.component.ts…

Angular Materialを導入しようとしたら"has no exported member 'MdCheckboxModule'"と怒られた話

Googleが提唱している「MaterialDesign」を、Angular2/4上で簡単に使うことができる 「Anglar Material」を導入しようとしたら、moduleの読み込みに失敗しました。 has no exported member 'MdButtonModule'. CHANGELOG.mdを見てみると どうやら2017-10-05の…

Angular2/4にてngSwitchを使ってtemplateの一部切り替えを行う

Angular2/4にてngSwitchを使ってtemplateの切り替えを行う 「routerを使う程ではないけど、templateを部分的に書き換えたいな〜」と思ったので、 ngSwitchを使用してtemplateの部分的な切り替えを行おうと思います。 Angular2/4にてngSwitchを使ってtemplate…

Angular2/4のLifecycle Hooksを理解する(ngOnInit編)

Angular2/4のLifecycle Hooksを理解する Angular2/4のLifecycle Hooksのうち、ngOnInitについて簡単な実験をして、 どのタイミングでngOnInitが発火するのか確かめてみることにします。 Angular2/4のLifecycle Hooksを理解する 前提 0. プロジェクトを立ち上…

Angular4にて、サービスを介してコンポーネントからコンポーネントへ値を送る

コンポーネントから別のコンポーネントに値を送る 親子関係があるときは、@Input()を使用することにより親から子へ値を送りました。 今回、あるコンポーネントから親子関係にないコンポーネントへ、 サービスを介して値を送る実装をしてみたいと思います。 …

Angular4からgoogle mapを操作する「AGM (angular-google-maps)」を使ってmapを表示。

Angular4を使ってgoogle mapを表示する 「google map上でクリックしたときにマーカをプロットし、その位置情報をAjaxで投げてDB上に保存する」ということがしたくなりました。 google map上での操作については「Maps JavaScript API」を使用すればできるので…

Angular2にて、依存性の注入(dependency Injection)をする

Angular2にて、依存性の注入(dependency Injection)を行う AngularJSでは、引数の情報を用いてDIを行っていましたが、 Angular2ではやり方が大きく変わりました。 今回はAngular2でDIを実践しようと思います。 具体的には、app.componentに、 ボタンをクリ…

angular2の@angular/routerを用いて、ページ遷移をするためのrouting設定をする

angular2のrouterを用いて、ページ遷移ができるようにする 今日は、こんな感じの簡単なroutingを実現してみたいと思います。 angular2のrouterを用いて、ページ遷移ができるようにする 0. 準備 1. app.component.htmlの編集 2. それぞれのページ用コンポーネ…

angular2で親componentから子componentへ値を受け渡す方法

angular2で親componentから子componentへ値を受け渡す angular2で親componentから子componentへ値を受け渡す 0. 準備 1. 親コンポーネントとテンプレートに以下を記述 2. 親コンポーネントのテンプレートに、コンポーネントへ渡したい変数を書く 3. 子コンポ…

angular2で要素をclickした時に、処理を行う

angular2で簡単にクリックイベントを実装 angularJSではng-clickというディレクティブを使ってクリックイベントを実装していました。 angular2ではどのように実装するか、実際に実装しつつ試してみたいとおもいます。 angular2で簡単にクリックイベントを実…

angular2でngFormを用いて双方向データバインディングを実現

angular2で双方向データバインディング angularJSとangular2では、双方向データバインディングの方法が異なります。 今日はangular2を使って双方向データバインディングを実現していきましょう。 angular2で双方向データバインディング 手順 準備 FormsModul…