はじめてのAngularJS

 はじめてのAngularJS

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

43fdc1357647368063c5a46cbe97b55f?s=128

Tessei Yoshida

February 28, 2014
Tweet

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の特徴 •データバインディングを採用 •データとビューが結合されていて、データ側が変更 されても、ビュー側が変更されてもどちらからでも同 期が取ることが出来ます。

  11. None
  12. angular.moduleとかcontrollerって何? AngularJSはDOMを境界として作動します。 ng-app=”Test”と書かれているDOMはTest モジュールの 配下となります。 同じく、ng-controller=”TestCtrl”と書かれているDOMが TestCtrl配下となり、 それらの中でスコープが定義されます。

  13. AngularJSの特徴 •DIを採用 •ちょっとJavaScriptとしては変則的な感じです。 •引数にサービス名を指定すると、順番に関係なく オブジェクトが設定されます。

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