はじめてのAngularJS

Slide 1

Slide 1 text

リッチアプリケーション開発を助けるOSSのJSフレームワーク「AngularJS」の魅力はじめてのAngularJS

Slide 2

Slide 2 text

目次 • 自己紹介 • AngularJSの紹介 • 機能紹介

Slide 3

Slide 3 text

自己紹介名前：吉田徹生 @teyosh 所属：株式会社シンドバッドインターナショナルユーザコミュニティ： AngularJS Japan User Group Web先端技術味見部

Slide 4

Slide 4 text

本出しました • 2013年12月発売 • 工学社から出版

Slide 5

Slide 5 text

AngularJSとは •2012年6月に公開 •オープンソース開発されている今最も伸びている JavaScriptフレームワークです

Slide 6

Slide 6 text

Googleトレンド

Slide 7

Slide 7 text

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はなんだっていいんだよ

Slide 8

Slide 8 text

まずはバニラJavaScriptで

Slide 9

Slide 9 text

AngularJSで書くと

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

AngularJSで用意されている機能 http://docs.angularjs.org/api

Slide 16

Slide 16 text

APIの種類 1. angular 2. Directive 3. Filter 4. Service 5. Factory 6. Provider

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

angular.elementについて Angularが独自実装したjqLiteという、必要最小限のjQueryクローンとなっています。 jQueryを読みこめばオーバーライドされて、 jQueryの機能がフルで使えるようになります。

Slide 19

Slide 19 text

Directiveについて高階層において、DirectiveはDOM要素(属性、要素名、CSS クラス)上でのマーカーであり、 AngularJSのHTMLコンパイラ($compile)に、そのDOM要素やその子要素に変形や特殊な振る舞いを割り当てるように伝えます。

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

ngRepeat

Slide 22

Slide 22 text

もちろん簡単に作成することが出来ます。

Slide 23

Slide 23 text

Filterについて式の値をフィルタリングできます。ビューテンプレート、コントローラー、サービスで使用出来ますオリジナルのフィルターを定義するのは簡単です。基本的なAPIは、filterProviderから提供されます。

Slide 24

Slide 24 text

orderBy

Slide 25

Slide 25 text

filter

Slide 26

Slide 26 text

サービスと特殊オブジェクトで依存性注入して、Webアプリケーションを作成します。サービスとは開発者が書いたAPIが定義されたオブジェクトです特殊オブジェクトはコントローラー、ディレクティブ、フィルター、アニメーションいずれかの1つです。これらオブジェクトを作成するためのレシピが5つあります。

Slide 27

Slide 27 text

Provider、Value、Constant、Factory、Serviceです。これらはすべてProviderのシンタックスシュガーになっています。