2015.04.29 GDGKobe Angular勉強会#3で使用した資料(一部編集)です。

1. 2015.4.29
GDGKobe Tada Satoshi

2. ただ さとし
Twitter : @pinmarch_t
Bioinformatics関係の仕事しています
(Perl, R, RStudio, etc.)
日常(業務)では(まだ)jQuery使ってます

3. 話すこと
• AngularJS 1.x系
(ご存知の方にはおさらい程度です)
話さないこと
• Angular2関連
(別の方が話しますので)

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

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

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

7. app.js
ここでrevcomp
フィルターを定義
index.html
Outputのところで
revcompフィルターを
使用

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

10. ※ filter.jsなどに分けて記述することが可能
 二重置換のバグが存在
 バグを回避し、
ATGC以外は”N”を返すように変更
 匿名関数でフィルターを作成してもよい
Before
After

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

12. (今回の例では)
Controller
• 使っていない
View
• データバインディング
 {{}}(double-curly syntax interpolation)
 ng-bindディレクティブ
Model
• ng-modelディレクティブ
=

13. AngularJSの難解便利すぎる用語
• 「ディレクティブ」とついているものがたくさん
• 独自に定義できる要素や属性
• 挙動を設定することができる
Wikipedia: ディレクティブ

14.  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.

15. 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 …)
カスタムディレクティブ(のちほど)

16. グラフを作るライブラリ: Flotr2
http://www.humblesoftware.com/flotr2/
入力したら、
入力された塩基の
分布を表示するように
コントローラーと
イベントの追加

17.  フィルターをfilter.jsに移した
 Flotr2ライブラリ
 ng-changeイベント
ディレクティブ
 ng-controllerディレクティブ
 Flotr2グラフ表示領域
index.html
“change_inputsequence()”

18.  グラフのオプションなど
 Flotr2が描画する対象要素
 Flotr2グラフ描画メソッド
 Controllerの定義
“$scope”を引数で受ける関数
 change_inputsequence イベント用関数
※モジュールの取得をする場合、
後で読み込む側のjsでは引数を
angular.module(‘app’, []) ではなく
angular.module(‘app’)とすること

19. 追加
 ディレクティブの定義
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のようになる。

20.  favico.js … ファビコンを変えられる。
 サンプルがある
http://lab.ejci.net/favico.js/example-angular/#/

21. フィルター・カスタムフィルター
ディレクティブ
UIライブラリの呼び出し
カスタムディレクティブ
コードはGitHubに置いていますのでご自由にお試しください
https://github.com/pinmarch/gdgkobe-20150429