Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angularを使ってみる実例いくつか (2015/4/29 GDGKobe)

1,588 views

Published on

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

Published in: Software
  • Be the first to comment

Angularを使ってみる実例いくつか (2015/4/29 GDGKobe)

  1. 1. 2015.4.29 GDGKobe Tada Satoshi
  2. 2. ただ さとし Twitter : @pinmarch_t Bioinformatics関係の仕事しています (Perl, R, RStudio, etc.) 日常(業務)では(まだ)jQuery使ってます
  3. 3. 話すこと • AngularJS 1.x系 (ご存知の方にはおさらい程度です) 話さないこと • Angular2関連 (別の方が話しますので)
  4. 4.  https://angularjs.org からダウンロード またはCDNへリンク(最新安定版は 4/29現在1.3.15)
  5. 5. 入力した文字を表示する。 単純に表示するだけではおもしろくないの で、塩基配列のreverse complement(逆相補配 列)を表示 : 「フィルター」を使う GAATTC  GAATTC
  6. 6. 入力した文字を表示する。 単純に表示するだけではおもしろくないの で、塩基配列のreverse complement(逆相補配 列)を表示 : 「フィルター」を使う GAATTC  GAATTC (変わってない!でも正しい) AGAATTC  GAATTCT
  7. 7. app.js ここでrevcomp フィルターを定義 index.html Outputのところで revcompフィルターを 使用
  8. 8.  デバッグ環境は入れていなくても、 ”ある程度は親切”に表示してくれる。 (でもバージョンがちゃんと対応してないし・・・)
  9. 9. ※ filter.jsなどに分けて記述することが可能  二重置換のバグが存在  バグを回避し、 ATGC以外は”N”を返すように変更  匿名関数でフィルターを作成してもよい Before After
  10. 10. index.html ng-app=“app”を指定
  11. 11. (今回の例では) Controller • 使っていない View • データバインディング  {{}}(double-curly syntax interpolation)  ng-bindディレクティブ Model • ng-modelディレクティブ =
  12. 12. AngularJSの難解便利すぎる用語 • 「ディレクティブ」とついているものがたくさん • 独自に定義できる要素や属性 • 挙動を設定することができる Wikipedia: ディレクティブ
  13. 13.  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.
  14. 14. 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 …) カスタムディレクティブ(のちほど)
  15. 15. グラフを作るライブラリ: Flotr2 http://www.humblesoftware.com/flotr2/ 入力したら、 入力された塩基の 分布を表示するように コントローラーと イベントの追加
  16. 16.  フィルターをfilter.jsに移した  Flotr2ライブラリ  ng-changeイベント ディレクティブ  ng-controllerディレクティブ  Flotr2グラフ表示領域 index.html “change_inputsequence()”
  17. 17.  グラフのオプションなど  Flotr2が描画する対象要素  Flotr2グラフ描画メソッド  Controllerの定義 “$scope”を引数で受ける関数  change_inputsequence イベント用関数 ※モジュールの取得をする場合、 後で読み込む側のjsでは引数を angular.module(‘app’, []) ではなく angular.module(‘app’)とすること
  18. 18. 追加  ディレクティブの定義 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のようになる。
  19. 19.  favico.js … ファビコンを変えられる。  サンプルがある http://lab.ejci.net/favico.js/example-angular/#/
  20. 20. フィルター・カスタムフィルター ディレクティブ UIライブラリの呼び出し カスタムディレクティブ コードはGitHubに置いていますのでご自由にお試しください https://github.com/pinmarch/gdgkobe-20150429

×