はじめてのAngularJS

リッチアプリケーション開発を助けるOSSのJSフレームワーク「AngularJS」の魅力 for Enterprise x HTML5 Conference 2014

Transcript

1. リッチアプリケーション開発を助けるOSSのJSフ レームワーク「AngularJS」の魅力 はじめてのAngularJS
2. 目次 • 自己紹介 • AngularJSの紹介 • 機能紹介
3. 自己紹介 名前：吉田徹生 @teyosh 所属：株式会社シンドバッドインターナショナル ユーザコミュニティ： AngularJS Japan User Group Web先端技術味見部
4. 本出しました • 2013年12月発売 • 工学社から出版
5. AngularJSとは •2012年6月に公開 •オープンソース開発されている今最も伸びている JavaScriptフレームワークです
6. Googleトレンド
7. AngularJSの特徴 •所謂、MVCを採用しています。 とはいえ、開発者曰く Having said, I'd rather see developers build kick-ass apps that are well- designed and follow separation of concerns, than see them waste time arguing about MV* nonsense. And for this reason, I hereby declare AngularJS to be MVW framework - Model-View-Whatever. Where Whatever stands for "whatever works for you". MV＊とかそんなこと気にするくらいなら、開発しろ。AngularJSはなんだっていいん だよ
8. まずはバニラJavaScriptで
9. AngularJSで書くと
10. AngularJSの特徴 •データバインディングを採用 •データとビューが結合されていて、データ側が変更 されても、ビュー側が変更されてもどちらからでも同 期が取ることが出来ます。
12. angular.moduleとかcontrollerって何？ AngularJSはDOMを境界として作動します。 ng-app=”Test”と書かれているDOMはTest モジュールの 配下となります。 同じく、ng-controller=”TestCtrl”と書かれているDOMが TestCtrl配下となり、 それらの中でスコープが定義されます。
13. AngularJSの特徴 •DIを採用 •ちょっとJavaScriptとしては変則的な感じです。 •引数にサービス名を指定すると、順番に関係なく オブジェクトが設定されます。
15. AngularJSで用意されている機能 http://docs.angularjs.org/api
16. APIの種類 1. angular 2. Directive 3. Filter 4. Service 5. Factory 6. Provider
17. angularについて 便利機能集 angular.bind angular.bootstrap angular.copy angular.element angular.equals angular.extend angular.forEach angular.fromJson angular.identity angular.injector angular.isArray angular.isDate angular.isDefined angular.isElement angular.isFunction angular.isNumber angular.isObject angular.isString angular.isUndefined angular.lowercase angular.module angular.noop angular.toJson angular.uppercase
18. angular.elementについて Angularが独自実装したjqLiteという、必要最小限 のjQueryクローンとなっています。 jQueryを読みこめばオーバーライドされて、 jQueryの機能がフルで使えるようになります。
19. Directiveについて 高階層において、DirectiveはDOM要素(属性、要素名、CSS クラス)上でのマーカーであり、 AngularJSのHTMLコンパイ ラ($compile)に、そのDOM要素やその子要素に変形や特殊 な振る舞いを割り当てるように伝えます。
20. a form input input[checkbox] input[email] input[number] input[radio] input[text] input[url] ngApp ngBind ngBindHtml ngBindTemplate ngBlur ngChange ngChecked ngClass ngClassEven ngClassOdd ngClick ngCloak ngController ngCopy ngCsp ngCut ngRepeat ngSelected ngShow ngSrc ngSrcset ngStyle ngSubmit ngSwitch ngTransclude ngValue script select textarea ngDblclick ngDisabled ngFocus ngForm ngHide ngHref ngIf ngInclude ngInit ngKeydown ngKeypress ngKeyup ngList ngModel ngMousedown ngMouseenter ngMouseleave ngMousemove ngMouseover ngMouseup ngNonBindable ngOpen ngPaste ngPluralize ngReadonly
21. ngRepeat
22. もちろん簡単に作成することが出来ます。
23. Filterについて 式の値をフィルタリングできます。 ビューテンプレート、コントローラー、サービスで使用出来ま す オリジナルのフィルターを定義するのは簡単です。 基本的なAPIは、filterProviderから提供されます。
24. orderBy
25. filter
26. サービスと特殊オブジェクトで依存性注入して、Webアプリ ケーションを作成します。 サービスとは開発者が書いたAPIが定義されたオブジェクト です 特殊オブジェクトはコントローラー、ディレクティブ、フィル ター、アニメーションいずれかの1つです。 これらオブジェクトを作成するためのレシピが5つあります。
27. Provider、Value、Constant、Factory、Serviceです。 これらはすべてProviderのシンタックスシュガーになっていま す。
28. Value
29. Constant
30. Serviceについて
31. Factoryについて
32. 引用 AngularJS AngularJS 1.2 日本語リファレンス | js STUDIO