Upload
pinmarcht-tada
View
1.794
Download
1
Embed Size (px)
DESCRIPTION
GDG神戸開催のAngularJS勉強会での資料です。個人的な感想を交えてAngularJSの紹介をしました。
Citation preview
2014.6.8
GDGKobe Tada Satoshi
ただ さとし Twitter : @pinmarch_t Facebookアプリ開発の本 書いたりしてました(数年前)
Bioinformatics関係の仕事しています (Perl, R, RStudio, etc.)
日常(業務)ではjQuery使ってます
https://angularjs.org/
はじめてのAngularJS! 本買いました!
はじめてのAngularJS! 本買いました! (けど…実は1週間じゃなくて数日です)
話すこと • AngularJSの特色
• AngularJSとjQueryと比べてみて
話さないこと
• 外部サーバとの通信
• テストについて
• デバッグについて
とりあえず重要なポイント “angular.js”を読み込む “ng-app属性”で有効にする
• <html>で指定する説明が多い
“{{}}”で変数の内容を表示する つまり、メインは後から内容を書き換えること
“note”(https://note.mu/)で使用例を 確認できる
Controller • Controllerがあることで挙動の管理をしやすい • $scope
View • {{}}(double-curly syntax interpolation) • テンプレート(へ)の埋め込みが楽
Model • データはJSオブジェクトに従う
データをテンプレートへ流し込む感覚は PerlのTemplate Toolkitや Railsのレイアウトテンプレート(.erb)
ルーティングの機能も持っている • module.config([ ‘$routeProvider’,
function($routeProvider) { … ここでURLとController、Viewを対応付ける … } ])
• $location window.locationをラップしているサービス
• $route URLによりビューを切り替えるサービス
AngularJSが提供または独自に作成できる シングルトンオブジェクト
アプリケーションの機能の遂行に必要な処理を提供する
AngularJSの提供するサービスは”$”から始まる
独自のサービス
• Module#provider(name, object or function) • Module#factory(name, function) • Module#service(name, constructor) データの取得処理などを実装
独自に定義できる要素や属性 挙動を設定することができる
• 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>
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) } } }; });
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)のラッパーの作成について紹介されている
AngularJSはMVCフレームワーク
“ng-app”ディレクティブ、コントローラ
ルーティング機能を保有 サーバサイド(Railsなど)で行っていたようなレイアウトテンプレートの処理をJavaScriptで簡便に行うことができ、 1つのHTML中に複数のコントローラを設定しそれぞれの処理を区分けして記述することが可能 リファレンス : https://docs.angularjs.org/guide