AngularJSでwebアプリを作ってみた!(2014/6/8 GDGKobe)

2,464 views

Published on

GDG神戸開催のAngularJS勉強会での資料です。個人的な感想を交えてAngularJSの紹介をしました。

Published in: Software

AngularJSでwebアプリを作ってみた!(2014/6/8 GDGKobe)

  1. 1. 2014.6.8 GDGKobe Tada Satoshi
  2. 2. ただ さとし Twitter : @pinmarch_t Facebookアプリ開発の本 書いたりしてました(数年前) Bioinformatics関係の仕事しています (Perl, R, RStudio, etc.) 日常(業務)ではjQuery使ってます
  3. 3. https://angularjs.org/
  4. 4. はじめてのAngularJS! 本買いました!
  5. 5. はじめてのAngularJS! 本買いました! (けど…実は1週間じゃなくて数日です)
  6. 6. 話すこと • AngularJSの特色 • AngularJSとjQueryと比べてみて 話さないこと • 外部サーバとの通信 • テストについて • デバッグについて
  7. 7. とりあえず重要なポイント “angular.js”を読み込む “ng-app属性”で有効にする • <html>で指定する説明が多い “{{}}”で変数の内容を表示する  つまり、メインは後から内容を書き換えること “note”(https://note.mu/)で使用例を 確認できる
  8. 8.  Controller • Controllerがあることで挙動の管理をしやすい • $scope  View • {{}}(double-curly syntax interpolation) • テンプレート(へ)の埋め込みが楽  Model • データはJSオブジェクトに従う  データをテンプレートへ流し込む感覚は PerlのTemplate Toolkitや Railsのレイアウトテンプレート(.erb)
  9. 9. ルーティングの機能も持っている • module.config([ ‘$routeProvider’, function($routeProvider) { … ここでURLとController、Viewを対応付ける … } ]) • $location  window.locationをラップしているサービス • $route  URLによりビューを切り替えるサービス
  10. 10.  AngularJSが提供または独自に作成できる シングルトンオブジェクト  アプリケーションの機能の遂行に必要な処理を 提供する  AngularJSの提供するサービスは”$”から始まる  独自のサービス • Module#provider(name, object or function) • Module#factory(name, function) • Module#service(name, constructor)  データの取得処理などを実装
  11. 11.  独自に定義できる要素や属性  挙動を設定することができる • DOMの挿入や削除(スタイルの変更) module.directive(‘focus’, function() { return { link: function (scope, element, attrs) { element[0].focus(); } }; });  <button focus>フォーカスあり</button> module.directive(‘hello’, function() { return { restrict: ‘E’, template: ‘<div>こんにちは</div>’, replace: true }; });  <hello></hello>
  12. 12. module.directive(name, function factory(injectables) { return { restrict: string, # ディレクティブの限定先(要素、属性 etc.) priority: numeric, template: string, templateUrl: string, replace: bool, transclude: bool, scope: bool or object, controller: function ($scope, $element, $attrs, $transclude), require: string, # 依存しているディレクティブ link: function (scope, iElement, iAttrs), compile: function (tElement, tAttrs, transclude) { return { pre: function (scope, iElement, iAttrs, controller), post: function (scope, iEement, iAttrs, controller) } } }; });
  13. 13.  AngularJSにはjqLiteというjQueryのサブセット が組み込まれている  jQueryを使用することも可能 Angular 1.2 only operates with jQuery 1.7.1 or above. However, Angular does not currently support jQuery 2.x or above. ~from FAQ~  『AngularJSアプリケーション開発ガイド』に はdatepicker(jQuery-ui)のラッパーの作成につ いて紹介されている
  14. 14.  AngularJSはMVCフレームワーク  “ng-app”ディレクティブ、コントローラ  ルーティング機能を保有 サーバサイド(Railsなど)で行っていたようなレイア ウトテンプレートの処理をJavaScriptで簡便に行う ことができ、 1つのHTML中に複数のコントローラを設定しそれぞ れの処理を区分けして記述することが可能 リファレンス : https://docs.angularjs.org/guide

×