2015.4.29

GDGKobe Tada Satoshi

ただ さとし Twitter : @pinmarch_t Bioinformatics関係の仕事しています

(Perl, R, RStudio, etc.) 日常(業務)では(まだ)jQuery使ってます

話すこと • AngularJS 1.x系

(ご存知の方にはおさらい程度です)

話さないこと

• Angular2関連 (別の方が話しますので)

https://angularjs.org からダウンロード またはCDNへリンク(最新安定版は 4/29現在1.3.15)

入力した文字を表示する。 単純に表示するだけではおもしろくないので、塩基配列のreverse complement(逆相補配列)を表示 : 「フィルター」を使う

GAATTC GAATTC

入力した文字を表示する。 単純に表示するだけではおもしろくないので、塩基配列のreverse complement(逆相補配列)を表示 : 「フィルター」を使う

GAATTC GAATTC (変わってない！でも正しい)

AGAATTC GAATTCT

app.js ここでrevcomp

フィルターを定義

index.html Outputのところで revcompフィルターを 使用

デバッグ環境は入れていなくても、 ”ある程度は親切”に表示してくれる。 (でもバージョンがちゃんと対応してないし・・・)

※ filter.jsなどに分けて記述することが可能

二重置換のバグが存在

バグを回避し、 ATGC以外は”N”を返すように変更

匿名関数でフィルターを作成してもよい

Before

After

index.html ng-app=“app”を指定

(今回の例では)

Controller • 使っていない

View • データバインディング {{}}(double-curly syntax interpolation)

ng-bindディレクティブ

Model • ng-modelディレクティブ

=

AngularJSの難解便利すぎる用語 • 「ディレクティブ」とついているものがたくさん

• 独自に定義できる要素や属性

• 挙動を設定することができる

Wikipedia: ディレクティブ

PerlのTemplate Toolkitライブラリにも ディレクティブはある http://www.template-toolkit.org/docs/manual/Directives.html

INSERT INCLUDE PROCESS ng-view WRAPPER BLOCK カスタムディレクティブ IF ng-if

FOREACH ng-repeat

etc.

DOM操作 (ng-bind, ng-view, ng-if, ng-repeat …)

イベント (ng-click, ng-mouseenter, ng-focus …)

Form (ng-model, input[], ng-list, ng-options, ng-disabled …)

その他 (ng-app, ng-init, ng-include, ng-model-options …)

カスタムディレクティブ(のちほど)

グラフを作るライブラリ: Flotr2 http://www.humblesoftware.com/flotr2/

入力したら、 入力された塩基の 分布を表示するように コントローラーと イベントの追加

フィルターをfilter.jsに移した

Flotr2ライブラリ

ng-changeイベント ディレクティブ

ng-controllerディレクティブ

Flotr2グラフ表示領域

index.html

“change_inputsequence()”

グラフのオプションなど

Flotr2が描画する対象要素

Flotr2グラフ描画メソッド

Controllerの定義 “$scope”を引数で受ける関数

change_inputsequence イベント用関数

※モジュールの取得をする場合、 後で読み込む側のjsでは引数を angular.module(‘app’, []) ではなく angular.module(‘app’)とすること

追加

ディレクティブの定義 restrict : ‘E’で要素に限定 template : 置き換える中身のテキスト

Before

After

app.js

index.html

HTML5仕様ではカスタム属性名には“data-”、カスタム要素名には”x-”を接頭辞として付与できる。 ディレクティブの名前にmyDirective (camel case)とすると、HTML上ではmy-directive/my_directive/data-my-directive/x:my-directiveのようになる。

favico.js … ファビコンを変えられる。 サンプルがある

http://lab.ejci.net/favico.js/example-angular/#/

フィルター・カスタムフィルター

ディレクティブ

UIライブラリの呼び出し

カスタムディレクティブ

コードはGitHubに置いていますのでご自由にお試しください https://github.com/pinmarch/gdgkobe-20150429