Debuginfo

思考とアウトプット

AngularJS

AngularJS+Slip.jsでタッチデバイスでリストの順番を並べるUIを作成する 

上記のようにリストを動的にスマホで動かせるようにするためにSlip.jsを使いました。Directiveに定義してng-repeatのDOMに置きます。$last === trueでループが終わったところで発火するようにしています。JQueryのライブラリを使うときは、これ良く使います…

AngularJSでwindowのresizeイベントでreloadする

ResponsiveのWeb appだとwindowリサイズ時に表示を切り替えたいときありますよね。 例えば、iPhoneを横で見たりとかすると画面が崩れるとか。 こんなときは、resize時にreloadすればいいと思います。そのコードはJQueryですが^^; あとはこれをどこに置くかと…

AngularJSでリダイレクト後に戻るを使えるようにする

メモ。 例えば、401等にリダイレクトした後に戻るボタンを使うと永遠に前の前に戻る事ができない。 これを回避するために$location.replace()を$location.path()の後に使う。 myFunc.init(userID).then(function(data){ $scope.data= data; }, function(res)…

AngularJSのEcosystem, ngModules.orgがすごい

AngularJSはあまり使われてないのでしょうか? うちの会社ではバリバリ使ってます。 Googleトレンドを見るとグイグイ来てることがわかります。 実際、つまずいてもStackoverflowを参照するとほぼ問題が解決しています。 では、本題ですが、JSのイケテナイと…

AngularJSでのObjectの比較

http://stackoverflow.com/questions/1068834/object-comparison-in-javascriptにある JSON.stringify(obj1) === JSON.stringify(obj2)をAngularJSで作ったObjectとで比較するとFailするので注意。なぜなら$$hashKeyが付与されているから。 Angularで比較し…

AngularJSでスターレイティング(星の評価)する方法

よくある☆による評価のコードです。 Add/Deleteボタンを使いましたが、イベントをフックする方法が色々あると思います。 unshift, shift, push and popを使ってfontawesomeのClassを書き換えてます。 in View Recommended! <button class="btn btn-warning btn-sm" ng-click="recommendDelete()"><i class="fa fa-minus"></i></button>

AnuglarJSでRadioボタンとSelectを連動させる方法

Selectの最初のオプションが空欄になってしまったりしてハマりましたが、ポイントはng-changeイベントでSelectの初期値を設定してやることです。 <label class="photoCategory" for="breakfirst"> <input id="breakfirst" type="radio" name="category" ng-model="category" value="breakfirst" ng-change="categoryType=selections.breakfirst[1]"> Breakfirst </label>

モバイルでText Input入力時にズームさせない方法

忘れないようにメモ。下記をhead内に入れることでモバイルデバイスで表示が固定される。 Text inputに限った話ではないみたいだけど。 AngularJSではapp/index.htmlに記述ですね。 # app/index.html <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> 個人的にはResponsiveでは必須だと思うんだけどな 参考 h</meta>…

mobile対応でfastclickを導入してないとヤバイのでAngularJSでも導入する

前のエントリでメニューの高速化をやりましたが、周知の事実ですが、一応。 mobile safariにはタップの300msの遅延があります。これをFixをするにはfastclickを入れます。 Yeomanを使っていればbowerで一発。 $ bower install fastclick --save あとは適当な…

AngularJS+Bootstrap3でモバイルview時にnavbarが閉じない(collapseしない)現象を解決する

どうやらSingle page applicationのときに起きる現象のようですが、Bootstrap3を使っていてwindowサイズを小さくするとメニューがハンバーガーになります。ここでリンクをクリックするとリンク先でハンバーガーのnavbarが閉じなくなります。解決方法は、下記…

AngularJSでng-showをコールバック等で使うときは$applyを使う

下記のようなViewがあって、 <div ng-show="showPicture"> picture here! </div> そのオンオフをFactory側で行うときは、$scopeのスコープ外なので$apply()をしないと反映されない。 Creator.initialize($scope.loginStatus.userID, function(){ $scope.showPicture = !$scope.showPicture; $s…

fontawsomeをAngularjS + Yeomanで使う方法

grunt build後フォント読み込み時にエラーが出るのでフォントディレクトリに入れてみました。 1. fontawesomeのインストール by bower $ bower install font-awesome --save 2. fontsをbowerディレクトリからコピー $ mkdir angular/app/fonts $ cp bower_co…

ng-repeatとradioボタンを同時につかってうまくいかない時の解決方法

ハマり所です。。 ng-repeat内のng-modelはスコープが違うのでうまく動きません。 解決方法は下記のようにキーを渡してスコープ内でOverwriteされないようにする。 controller $scope.cover = {selected: 0}; view <input type="radio" id="cover{{$index}}" name="cover" ng-model="cover.selected" ng-value="$index"> 参考:https://github.com/angular/angula…

AngularJSでRedirect後に戻るでRedirect前のページに戻る方法

AngularJSでモバイルからのアクセスを検知してモバイル用のページに振り分ける方法のエントリでリダイレクトを使用しましたが、これだと戻るボタンで戻ると再度リダイレクトされて戻れません。戻るを機能させるためには、下記のようにします。 $location.pat…

Instagram APIでPaginationを実現する

Instagram APIでユーザフィードはデフォルトで20しか返ってきません。Countパラメータで変更可能ですが、自分が確認したところ、30ぐらいが上限のようです。なのでユーザが見ているときに、"もっと見る"のようなボタンを容易して次を見させるのがよさそう…

AngularJSでモバイルからのアクセスを検知してモバイル用のページに振り分ける方法

基本的にResponsiveで対応しますが、根本的にページの表示自体をモバイル用にしたい時があります。 サーバ側でHeader等を調べてページを振り分ける方法もあると思いますが、基本的にAPIを返すというのをサーバ側の処理にしたいし、Single Page Application的…

AngularJSでMasonryを使う

Masonryとはレンガのように要素を並べるJQueryプラグインです。 NHKスタジオパークで使われてるように大きさによって動的に要素を並べてくれます。 参考:なんだこれ!!「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ!! こ…

AngularJSのng-repeatのループ終了後にfunctionを走らせる方法

外部ライブラリ等ではhtmlタグを作った後にfunctionをアプライするときがあります。 例えば、テーブルを作成後にテーブル整形するJQuery functionを適用する場合です。 AngularJSでは、ng-repeat終了のイベントは存在しないのでDirectiveを使うことになりま…

Mojolicious + AngularJS + Yeoman = Mojangman?

MojolicousをAPI dedicatedなバックエンド、AngularJSをフロントにするWebappの構築を考えています。 Yeomanでdist以下をどのようにデプロイするかが述べられていますが、git subtreeを使った方法だと複雑になりそうです。 色々調べてみると、Jeffrey氏がRai…

AngularJSでgrunt serverは動くのにgrunt buildでエラーの対処法 - Error: [$injector:unpr] Unknown provider: a

minifyするときに変数が変わってしまい失敗するようです。 解決策は配列に引数名をStringで指定すればよし。 // config angular.module('thnkoutApp', [ 'ngCookies', ... ]) .config(['$routeProvider', function ($routeProvider) { .... }]); // controll…

AngularJSのテスト(Testing Service編) with Karma + Jasmine

前回のエントリ](http://shoheik.hatenablog.com/entry/2013/11/08/073810)でKarmaの設定を説明しました。KarmaのデフォルトはJasmineというテストフレームワークを使っています。Angularでテストを書くときは、数行のセットアップが必要です。 今回テストす…

AngularJSのテスト。Karmaの設定まわり。

npmとかgruntとかあまり理解せず、いきなりYeomon(Yo+Grunt+Bower)を使い始めたのでテスト環境がどうなっているのかわかりません。 GruntはGruntfile.jsを読み込んで各モジュールを実行しています。grunt build とか grunt server:dist等で各モジュールを起…

AngularJSでバックエンドRESTをモックして、フロントを独立で開発する方法

開発を進める上でServerサイドと分離してフロントサイドのみに集中して開発すると捗ります。AngularJSではサーバサイドをモックするAPIが用意されています。使ってみました。(Yoeman等はイントール済みを仮定) まず、angular-mocks.jsというライブラリをind…

AngularJSのはじめの一歩

Mastering Web Application Development with AngularJS作者: Pawel Kozlowski,Peter Bacon Darwin出版社/メーカー: Packt Publishing発売日: 2013/08/23メディア: Kindle版この商品を含むブログを見る ここ2週間ぐらいAngularJSを触っています。 あまり日…