angular.js $animateCss

2015-08-28T21:58:53+09:00 JavaScript angular.js

$animateCssを使えばkeyfames構文のような形式でアニメーション定義出来るっぽいのでやってみた

angular-cache

2015-07-17T08:11:22+09:00 JavaScript angular.js

angular.jsには$cacheFactory?っていうのがあるけれどもおそらくはlocalStorageとかにキャッシュしたりするような機構は備わっていないはず。でそういうのを出来るようになるangular-cacheっていうのを使ってみたのでメモ

angular.js directiveのbindToController

2015-06-20T16:45:37+09:00 JavaScript angular.js

参考: AngularJS1.4とbindToController

参考から引用すると

Directiveを自作する時に、コントローラーへ値を引き渡し、バインディングするには$scopeが必要でしたが、これが$scopeいらずで行えるようになりました。ng-controllerのas構文では先行して可能だったことがDirectiveでも可能になったんです。また、1.4では、どの値をバインディングするのか、どの値をバインディングしないのかを明確に定めることができるようになりました。

との事。要はdirectiveで指定されるcontrollerにdirectiveが持つscope等で指定したパラメーター等をcontrollerのプロパティとして伝播し利用する事が1.3からbindToControllerを使って可能になり、1.4からはbindToControllerのパラメーターの設定によりバインディングの設定等が行えるようになったよ的な事かと

っていう事でやってみる

ng-infinite-scroll

2015-06-19T00:00:00+09:00 JavaScript angular.js

公式: https://sroze.github.io/ngInfiniteScroll

スクロールによるページング処理に関してみたいな事をangular.jsでやってくれるライブラリがng-infinite-scrollっていうのがあるのでさらっと使ってみた

ECMAScript6でangular.js

2015-06-17T01:29:42+09:00 JavaScript angular.js

angular.js(1.x)を使ってるけどJavaScriptをbabel.jsを使ってECMAScript6で書きたい。そういう場合どうすれば良いのか色々調べてみた

※angular.jsアプリケーション全体をES6で書いて検証した訳ではないので本当に問題が無いかは不明

※あくまで開発よりはビルドする方法なネタ

angular.resumeBootstrapの再考

2015-02-09T00:00:00+09:00 JavaScript angular.js

以前もちょっとだけangular.resumeBootstrapについて書いてたけどざっくりしてるし改めて色々やってみた

ng-strict-di

2014-09-02T00:00:00+00:00 angular.js JavaScript

参考: angular1.3から追加されるng-strict-diを使ってminifyに強くする。

っていう本が出るそうで、その関連でng-strict-diっていうのがあるとのことを知ったので色々検証してみた。詳しくは上記の参考サイト見りゃいい

directiveのmultiElement

2014-07-25T00:00:00+00:00 angular.js JavaScript

<!DOCTYPE html>
<html ng-app="sample">
  <head>
    <script src="https://code.angularjs.org/1.3.0-beta.16/angular.js"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="SampleCtrl">
    <div directive1-start></div>
    <div directive1-end></div>
  </body>
</html>

みたいなのがあった場合において

ng-directiveのscope

2014-07-20T00:00:00+00:00 angular.js JavaScript

参考: AngularJSのdirectiveとは

<html ng-app="sample"
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
    <script src="main.js"></script>
  </head>
  <body>
    <div ng-controller="SampleCtrl">
      <h4>controller: {% raw %}{{message}}{% endraw %}</h4>
      <div directive1>
        <h4>directive1: {% raw %}{{message}}{% endraw %}</h4>
        <div directive2>
          <h4>directive2: {% raw %}{{message}}{% endraw %}</h4>
        </div>
      </div>
    </div>
  </body>
</html>

っていうのに作ったng-directiveに対してscopeを設定するかしないかで何が変わるのか検証してみた

angular.jsをやってみる (26) - ngMessages -

2014-07-06T00:00:00+00:00 angular.js JavaScript

公式リファレンス: https://docs.angularjs.org/api/ngMessages

要は入力フォームなどの検証メッセージを表示ような要件なUIをサポートしたりするようなライブラリな模様(※angular1.3.x系からの物な模様。1.2.x系のドキュメントには無いので)

scope.$evalで引数を設定する方法

2014-07-02T00:00:00+00:00 angular.js JavaScript

参考: https://docs.angularjs.org/api/ng/service/$parse

angular.jsでng-initのような式評価を使う」の続き的な所として、scope.$eval(attrs.ngCall)をすればng-initのような式評価で実行させる事が出来るっていうのは前回で書いたが、例えばそのngCallで呼び出される$scope等に定義した関数等の場合に引数にdone等のようななんらかの処理を完了させるようなコールバックを引数に渡せるようにしたいとかっていう要件な場合な件を調査してみた

angular.jsでng-initのような式評価を使う

2014-07-02T00:00:00+00:00 angular.js JavaScript

参考: https://github.com/angular/angular.js/blob/master/src/ng/directive/ngInit.js#L63

angular.jsで

のようにngInit Directiveで指定した式を評価して実行したいようなangular.js Directiveを作りたい場合

angular.jsをやってみる (25) - $httpProvider.interceptors -

2014-05-17T00:00:00+00:00 angular.js JavaScript

たまたまドキュメントを見ていたら、$httpで処理されるリクエストやレスポンスなどにインターセプターを利用してfilter的なことできるっぽい。ということでやってみた

angular.jsをやってみる (24) - ng-non-bindable -

2014-05-12T00:00:00+00:00 angular.js JavaScript Ruby Rails

参考: AngularJSとサーバーサイドテンプレートの混在とngNonBindable

※上記の参考を必読することをオススメ

上記参考にも書いてるのですが、例えばクエリーなどにおいてangular.jsが処理されるような記法なクエリーが含まれているとXSSになるっていう話があるのですが、実際自分でやってみた。

※実検証はRails4を使ってやった

angular.jsをやってみる (23) - ngTouchを使ってスワイプイベントを利用 -

2014-04-14T00:00:00+00:00 angular.js JavaScript

公式リファレンス: http://docs.angularjs.org/api/ngTouch

スマートフォン等においてカルーセルビュー的な例でスワイプする事でビューを切り替えたり出来るようにしたいとかの場合にはngTouchを使う事で出来る模様

angular.jsをやってみる (22) - $exceptionHandler -

2014-04-12T00:00:00+00:00 angular.js JavaScript

公式リファレンス: http://docs.angularjs.org/api/ng/service/$exceptionHandler

例外とかがスローされた際には$exceptionHandlerっていうサービスに処理が委譲されるようになっている模様。でデフォルトでは$log.errorでエラー内容が処理されるようになっているとの事

angular.jsをやってみる (21) - $logProvider -

2014-04-12T00:00:00+00:00 angular.js JavaScript

$logを使えばログ(console.メソッド)に対応するのを利用できるただそれだけな模様なのだけど、デバッグメッセージ(console.debug|$log.debug)に関しては$logProviderで設定する事により発生しない模様

angular.jsをやってみる (20) - $q -

2014-04-10T00:00:00+00:00 angular.js JavaScript

公式リファレンス: http://docs.angularjs.org/api/ng/service/$q

以下の例だと非常に微妙なんだけれども、例えば

var Sample = (function() {

  var values = ["hoge", "fuga", "foobar"];

  function Sample() {
  }

  Sample.prototype.getName = function(cb) {
    setTimeout(function() {
      var index = Math.floor(Math.random() * values.length);
      cb(values[index]);
    }, 1000);
  }

  return Sample;

})();

なんていうのがあった場合に

angular.module("app", [])
  .factory("SampleFactory", function() {
    return {
      getName: function() {
        var name;

        var sample = new Sample();
        sample.getName(function(value) {
          name = value;
        });

        return name;
      }
   };
  })
  .controller("SampleController", function($scope, SampleFactory) {
    $scope.name = SampleFactory.getName();
  });

だなんてやってもSampleFactory.getNameで返される値はundefinedにしかならない。そりゃその値が返される際にまだコールバックが発生していないのでname変数は初期化すらされずundefinedになるっていうオチ

んまぁこういうパターンだと別にfactoryしなくても良いケースなので分かりづらいけど、要は非同期処理等が行われるにあたって、それが完了した際に通知するような仕組みを利用しなければ正常に値が取得できないような場合には$qなDeferredオブジェクトを利用する事で可能っぽい。っていう事で$qを使って上記コードを書き換えると

angular.jsをやってみる (19) - 動的に追加したエレメントに対して$animate.enter -

2014-04-08T00:00:00+00:00 angular.js JavaScript

公式リファレンス: http://docs.angularjs.org/api/ngAnimate/service/$animate

例えばクリックイベントによりノードを追加したりするにあたって、ngAnimateなアニメーションを利用したい場合とかに$animate.enter等を利用する事で出来るっぽいのでやってみた

とりあえず、わかりやすい例としては画面上に通知的なのを出す。それをクリックイベントにてエレメントを追加し$animateを使ってfadeIn/fadeOutなアニメーション的な事をする

angular.jsをやってみる (18) - $emit -

2014-04-06T00:00:00+00:00 angular.js JavaScript

前回のangular.jsをやってみる (17) – $broadcast -の続き。$broadcastと$emitを同時に書くとごちゃごちゃになる気がしたので分けた次

で前回で$broadcastはそれを実行したスコープから下への子孫内スコープのイベントをfireするっていう形だったのですが、$emitはその逆というか自身のスコープから親のスコープへのイベントをfireするっていう事な模様

という事でやってみた

angular.jsをやってみる (17) - $broadcast -

2014-04-04T00:00:00+00:00 angular.js JavaScript

公式リファレンス: http://docs.angularjs.org/api/ng/type/$rootScope.Scope

※ややこしいので公式リファレンス読むかググった方が良い

node.jsのEventEmitter的なのという説明が正しいかは知らないけど、そんな感じでイベント通知による処理を促したり出来る模様。で今回は$broadcastのみ。$emitは次回(ややこしいので)

angular.jsをやってみる (16) - ngAnimate#2 -

2014-04-03T00:00:00+00:00 angular.js JavaScript

angular.jsをやってみる (15) – ngAnimate -では単にng-enterやng-leaveなどのCSSを利用する事でアニメーションを利用する事が出来たわけだけど、これをJavaScriptなangular.moduleによってコントロールする事も出来る模様。という事で前回同様なフェードイン・フェードアウトをやってみた

angular.jsをやってみる (15) - ngAnimate -

2014-04-02T00:00:00+00:00 angular.js JavaScript

参考: AngularJSでちゃちゃっとアニメーションを試す - AngularJS Ninja

公式リファレンス: http://docs.angularjs.org/api/ngAnimate

んまぁ名前からしてCSS3?なアニメーションな機能をサポートするものっぽい。単純にng-repeatしている部分なエントリーをフィルターし、出る際にフェードインさせたり、消えたりする際にフェードアウトさせたりをやってみる

angular.jsをやってみる (14) - $scope.$apply -

2014-03-31T00:00:00+00:00 angular.js JavaScript

参考: AngularJS のデータバインドを支える $apply

公式リファレンス: http://docs.angularjs.org/api/ng/type/$rootScope.Scope

angular.jsにある$httpを使ってXHRするようなケースパターンだと$applyは内部的に行われているらしいので必要ないらしいのですが、$httpを使わずに独自でXHRを使ってHTTPリクエストを行いレスポンスを取得して結果をビューにバインドしたいようなケースの場合には$applyをしないとデータバインドが正常に行われない模様。というか行われないではなくてされてはいるけど、それが反映されない状態になってるだけなのかなと

という事でやってみた。ちょっと前に書いてたTwitter APIを使ったChrome拡張なやつでangular.jsを使ってはいるが$httpを使ってないケースなのでこれがちょうど良いのではと

angular.jsをやってみる (13) - $sceとngSanitize -

2014-03-28T00:00:00+00:00 angular.js JavaScript

※ややこしいので公式ドキュメント読んだ方がいい

<div ng-controller="SampleController">
  <span>{% raw %}{{message}}{% endraw %}</span>
</div>

的な感じになってて

angular.module("app", [])
  .controller("SampleController", function($scope) {
    $scope.message = '<span style="color: red">hoge</span>';
  });

みたいにすると、$scopeとかに含まれるHTMLとかはエスケープされて出力されるらしい

angular.jsをやってみる (12) - angular-mocks.jsを使ったテスト -

2014-03-27T00:00:00+00:00 angular.js JavaScript

今まで

angular.jsのkarmaを使ったテスト
protractorを使ったangular.jsのe2eテスト

っていうのをやってたけど、angular-mocks.jsを使う事での単体テストすることも可能な模様なので色々整理する辺りな所としてやってみた

angular.jsをやってみる (11) - $interval -

2014-03-27T00:00:00+00:00 angular.js JavaScript

window.setIntevalをangular.jsでラップした物らしい。http://docs.angularjs.org/api/ng/service/$interval を見つつやってみた

angular.jsをやってみる (10) - ngCookies -

2014-03-26T00:00:00+00:00 angular.js JavaScript

http://docs.angularjs.org/api/ngCookies を使えばCookie的な利用をする事も出来るらしい。っていう事で使ってみた

angular.jsをやってみる (9) - $resourceのparamsDefaultにおける@接頭辞 -

2014-03-20T00:00:00+00:00 angular.js JavaScript

前回のangular.jsをやってみる (8) – $resource -でも述べているように、paramsDefaultのパラメーターには@な接頭辞を持つデータ指定を利用する事が出来る

angular.jsをやってみる (8) - $resource -

2014-03-19T00:00:00+00:00 angular.js JavaScript

REST and Custom Servicesを見つつやってみる。でRESTfulなWebサービス的なのが必要なので今回はRailsで適当なのでっち上げてやってみる。つまりangular.jsとかソッチ系も全部Railsプロジェクト内に作る

angular.jsをやってみる (7) - route -

2014-03-18T00:00:00+00:00 angular.js JavaScript

Routing & Multiple Viewsな辺りのドキュメントを見つつやってみた

angular.jsをやってみる (6) - service -

2014-03-17T00:00:00+00:00 angular.js JavaScript

provider同様にserviceを使ってオブジェクトを注入する方式を利用する事もできる。で似たようなのでfactoryっていうのもあるけど、angular.jsをやってみる (1)でやってるのでそこはパス。無論、「serviceとfactoryの違い」に関しては後述するので

angular.jsをやってみる (5) - provider -

2014-03-16T00:00:00+00:00 angular.js JavaScript

http://docs.angularjs.org/guide/providers な辺りのドキュメント見つつやってみた

angular.jsをやってみる (4) - filter -

2014-03-10T00:00:00+00:00 angular.js JavaScript

angular.jsとかで

<div ng-repeat="sample in samples | filter:searchText">
  {% raw %}{{sample}}{% endraw %}
</div>

的にパイプでフィルターを指定したり出来る訳だけど、それを実装する方法

angular.js+chrome_ex_oauth

2013-11-18T00:00:00+00:00 angular.js Chrome Extension JavaScript

angular.jsを使いつつ、chrome_ex_oauthを使ってTwitter APIを使うデモとか出来るんじゃないかなーって思ってやってみた

angular.jsをやってみる (3) - directive -

2013-10-26T00:00:00+00:00 angular.js JavaScript

http://docs.angularjs.org/guide/directive を読みつつドキュメント読みを遂行してみる

protractorを使ったangular.jsのe2eテスト

2013-10-25T00:00:00+00:00 angular.js JavaScript

AngularJSのkarmaを使ったテストでも書いたけど、そういうのをパパっと?出来るprotractorっていうのがあるらしいので使ってみた

※angular.jsを使ったページに関しては前回(上記リンク先)と同様な感じで、テキストフィールドとng-repeaterによる作用をしているだけなのを利用する

angular.jsをやってみる (2) - $interpolateProvider -

2013-10-22T00:00:00+00:00 angular.js JavaScript

{% raw %} angular.jsで$interpolateっていう機能を使う事で{{ model.name }}っていうのが評価されて出力されるわけだけど、デフォルトではstartSymbolが{{で、endSymbolが}}っていう事になってる。$interpolateProviderを使うことでこの設定を変える事も出来る模様 {% endraw %}

angular.jsをやってみる (1)

2013-10-21T00:00:00+00:00 angular.js JavaScript

以前からちょいちょいネタに出したりしてるけど、angular.jsの公式ドキュメントを読みつつ勉強を進めてみようかと。今回はbootstrap+conceptual overviewなセクションを読みつつ(※directiveな仕様なやつは今回は除外、別途で書く予定)

angular.jsのkarmaを使ったテスト

2013-09-10T00:00:00+00:00 angular.js JavaScript

AngularJSなコントローラーとかの単体テストに関しては

describe("...", function() {
  it("...", function() {
    var scope = {};
    var controller = new SampleController(scope);

    // 以下省略
  });
});

的な事が http://docs.angularjs.org/tutorial/step_02 には既に書いてあるから良いんだけど、で実際HTMLと組み合わせて処理とかをテストするにはどうすれば良いのかがこのセクションの次に書いてあるe2eテストっていう方式を採用すれば出来るらしい。んまぁそういう事じゃないような気もするのだけど

んまぁとりあえずやってみたんでレポート