Movatterモバイル変換

angular 1 脳で見るangular 2

自己紹介株式会社シーエーアドバンス新川盛幸業務系社内システムruby on rails、angularjs

話すこと1. 特徴2. Template Syntax3. Built-in Directive4. Component指向5. angular-cliangularjsを触った事ある人向けになるべくangular1でいうコレがangular2でいうアレっていう形で話せればと思います。

Version今から説明する事は、versionが変わっていろいろ更新される部分もあるかもしれませんが、どんな感じで書くのか、だいたいのイメージができればいいかなと思ってます。試したversion = v2.0.0-alpha.44今 = v2.0.0-alpha.46

開発言語の選択angular2は生のjavascriptでも書けますが、typescript、dartなどのAltJSを選択して開発できます。普段はrubyに似た構文で書けるcoffeescriptで開発していますが、angularが推奨してるっぽいのでtypescriptを使用した説明をします。typescriptは次期javascriptの仕様となるES6由来の構文で書け、IDEのサポートも受けれます。特徴

例特徴angular1とどのくらい変わったか比較angular2でも開発言語の選択での違いを比較<my-app>タグを<h1>にする簡単なディレクティブの定義の例

特徴ng-appもng-controllerもなく、まとめてコンポーネント(ディレクティブ)$scopeもなくなり、thisを使う

TypeScript特徴ControllerDirective必要なモジュールをロード一番上の層のComponentはbootstrapが必要

{{}}Template Syntax{{}} = 展開

#Template Syntax# = エレメント

[]Template Syntax[] = プロパティバインディング

[]Template Syntaxangular 1.x angular 2.x<img ng-src=”image_url”> <img [src]=”image_url”><a ng-href=”page_url”> <a [href]=”page_url”><div ng-show=”true”> <div [visible]=”true”><div ng-hide=”false”> <div [hidden]=”false”>

[]Template Syntaxangular 1.x angular 2.x<div ng-style=”color:red”> <div [style.color]=”red”><div [style.width.px]=”20”><div ng-class=”{‘active’:true}”> <div [class.active]=”true”><div [attr.class]=”active”>

()Template Syntax() = イベントバインディング

イベントTemplate Syntax<button ng-click=”onClick()”> <button (click)=”onClick()”><button ng-keyup=”keyup()”> <button (keyup)=”keyup()”><button (keyup.enter)=”enter()”><button ng-mouseover=”mouseover()”> <button (mouseover)=”mouseover()”>ng-* => (*)

[()]Template Syntax[()] = 双方向データバインディング

[()]Template Syntax角カッコ(プロパティバインディング )[ng-model]だけでは値は入るが、変更は検知しない丸カッコ(イベントバインディング )(ng-model-change)を利用して変更された値をnameに入れる

[()]Template Syntax[] = プロパティ = ModelからViewへ() = イベント= ViewからModelへ[()] = 両方 = 双方向

ng-ifBuilt-in Directivesng-if => *if

ng-repertBuilt-in Directivesng-repeat => *for

ng-modelBuilt-in Directivesng-model => [(ng-model)]

ng-changeBuilt-in Directivesng-change => (ng-model-change)

ConponentConponentはController(ロジック)やView(html)を含んでいるパーツログインフォームだったりメニューだったりをConponent化してまとめて作っていきます。Component指向

ConponentComponent指向適用するセレクタの指定 (restrict)'cmp' = タグ'[cmp]' = 属性'cmp, [cmp]' = 両方'button[cmp]' = buttonタグのcmp属性

ConponentComponent指向展開するテンプレートの指定templateで直接htmlを書いてもOK

ConponentComponent指向適用するCSSの指定、なくてもOK

ConponentComponent指向View側で使用するモジュールの指定built-in directiveだったり、作成したコンポーネントだったり。FORM_DIRECTIVESにはng−modelとかが入っている。使用するモジュールのロード

Shadow DomComponentが生成されるとShadow Domという要素になります。htmlがカプセル化され、cssやjsが干渉しない要素個人ならまだしもチームでcssを書いたり、大きいアプリケーションになるほどcssのクラス名を全体に干渉しない名前を調べたり、htmlの子や孫セレクタで絞って適用したりするかと思いますが、読み込んだstyleはcomponent単位でのみ有効Component指向

Shadow DomComponent指向my-componentはBootstrapのCSSは当たるが

Shadow DomComponent指向my-componentがstyleUrlで呼び出したcssは外部に影響しない

Componentの構造Conponentの中に他のConponentを子として持ち、ツリー構造でアプリケーションを作っていきます。親は子にデータを渡したり、子は親にイベントを通知したりできます。angular1でいう$scope.$broadcast、$scope.$onみたいなものComponent指向

Componentの構造Conponent指向

親から子へ(attribute)Component指向

親から子へ(attribute)Component指向親が名前や年齢を渡す子は@Inputで受け取る

子から親へ(event)Component指向

子から親へ(event)Component指向親は子で定義されたeventを受け取る子はEventEmitterを使ってeventを作る作成したEventEmitterを使ってeventを発行

https://github.com/angular/angular-cliangular-cli

サーバー動かしたりlive-reloadとかtypescriptのコンパイルとか、簡単にプロジェクトのセットアップをしてくれるnpmのパッケージ簡単なscafoldがあったり、ディレクトリの分け方の統一ができたりするangular-cli

angular1とかなり変わっていて、結構学習コストがかかりそうですが、速さの面でもメリットが大きく、コンポーネント単位で組み立てていくangularjsは疎結合にしやすいし、一度作ったコンポーネントの使い回しが楽そう。紹介できたのはわずかですが、ajax周りとかanimationとか、まだまだ試せていないAPIがいっぱいあるのでこれから勉強していきたいです。angular-cliで簡単にangular2を試せるのでぜひ試してみてください。Component指向所感

Movatterモバイル変換

Change Language

angular1脳で見るangular2

Embed presentation

Recommended

More Related Content

What's hot

Similar to angular1脳で見るangular2

angular1脳で見るangular2