kitak's blog

Kみたいなエンジニアになりたいブログ

angularjs

Angular.jsのDIで注入されたサービスが参照されているかどうか調べるコードを書いた

前提 Angular.jsには、DIの仕組みがあって、あるサービスがどのサービスに依存しているか記述することができる。 (この記事とは関係ないが、DIのための注釈がAngular.jsに触れたことがない人からすると黒魔術のように見えて、敷居を高いように感じるが、その…

angular-zengin-codeっていうモジュールをつくった

こんにちは。餅を食べました。きたけーです。 rosylilly/zengin_code · GitHub をAngularのディレクティブでラップした kitak/angular-zengin-code · GitHub というモジュールをつくりました。 できること 銀行コードと支店コードのバリデーション 入力され…

AngularJSでフォームを入れ子にしたときに内側のフォームを非表示にしてバリデーションをスキップする術

こんにちは。ワインをたくさん飲みました。きたけーです。 AngularJSでフォームを入れ子にしたときの内側のフォームのバリデーションをスキップする術を知ったのでメモします。 HTMLのタグの仕様では、formタグはネストできないことになっていますが※1、 Ang…

AngularJSでフォームまわりで最初はバリデーションメッセージを表示せず、フォーカスが外れたタイミングで表示する術

こんにちは。昼に煮込みうどんをたべました。きたけーです。 細かいテクニックですが、AngularJSでフォームでページを表示した最初はバリデーションメッセージを表示せず、フォーカスが外れたタイミングで表示する術を見つけたのでメモ。 なんでやるの? ペ…

Material Design for AngularJS Apps を使っている

こんにちは。おなかが空きました。きたけーです。 最近、node-webkitとかで自分が使うアプリをつくるときに Material Design for AngularJS Apps angular/material · GitHub を使っています (他にもreact+flux+material-uiの組み合わせとか)。 デモページで…

AngularJS の resourceをラップしたサービス の命名をどうするか

こんばんは。酔っ払っています、きたけーです。 最近、AngularJS の サービス の命名で悩んでいます。 mgechev/angularjs-style-guide · GitHub とかみると、 https://github.com/mgechev/angularjs-style-guide#services Use camelCase to name your servic…

AngularJSのpromiseが解決した結果が伝搬するには、$digestループを開始する必要がある

こんにちは。牡蠣のパスタをたべました。きたけーです。 今日、Angularでこんなテストコードを書いたのですが、promiseを解決したときに実行されるコールバックが実行されなくて困りました。 describe 'Controller: UserController', -> beforeEach module '…

DOM要素からAngularJSのスコープのオブジェクトを得る術

こんにちは。もやし炒めをたべています、きたけーです。 DOM要素からAngularJSのスコープのオブジェクトを得る術を知ったのでメモ。デバッグするときに捗りそう。こんなかんじの内容をコンソールで叩きます。 var el = document.getElementById('hoge'); ang…

AngularJSのカスタムディレクティブのlinkとcontrollerの使い分け

こんにちは。パンをたべました、きたけーです。 AngularJSのカスタムディレクティブをつくろうとして、悩むのがlinkとcontrollerの使い分けです。どちらもスコープや要素を操作して、ディレクティブの挙動を決めることができます。 この使い分けに関してはAn…

AngularJSのカスタムディレクティブのscopeで指定したアクションに引数を渡す術

こんにちは。今日はキタソン、きたけーです。 今日は一日中、AngularJSのカスタムディレクティブをつくってたんですが、スコープのアクションに引数を渡す方法がわからなくてちょっと困ったのでメモ。(コードはcoffeescript) ディレクティブの定義がこれで a…

ngAnimateでclass属性の変更のフックをつかったアニメーションをやってみた

こんにちは。久しぶりに背脂チャッチャ系らーめんを食べて、テンションがあがっているきたけーです。 AngularJS で class属性の変更のフックをつかったアニメーションをやってみたのでメモ。 ngAnimate アニメーション用のモジュールが公式であるのでそれを…

AngularJS で LocalStorage を扱う術

こんにちは。おなかが空きました。きたけーです。 AngularJSでLocalStorageを扱う術を知ったのでメモ。 ngStorage つかうモジュールはこれ gsklee/ngStorage · GitHub 。 LocalStorage と SessionStorageのインターフェイスを用意してくれる。 こんなかんじ …

AngularJS で cookie を扱う術

AngularJS で cookie を扱う術を調べてみたのでメモ ngCookies angular公式のライブラリ。以下のコマンドでbowerからインストールできる。 bower install angular-cookies --save 追加、削除、読み込みの簡単なインターフェイスを提供してくれる。こんなかん…

AngularJSで「サービス」を構築するときの service と factory

こんにちは。ジャンキーなものが食べたい、きたけーです。 AngularJSでは、アプリ内で共通な値やロジックをまとめたものを「サービス」と呼んでいますが、それを定義する service と factory が紛らわしかったのでメモ。 どちらもシングルトンオブジェクト A…