angular1脳で見るangular2

angular 1 脳で見るangular 2

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

話すこと
1. 特徴
2. Template Syntax
3. Built-in Directive
4. Component指向
5. angular-cli
angularjsを触った事ある人向けに
なるべく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
特徴
Controller
Directive
必要なモジュールを
ロード
一番上の層のComponentは
bootstrapが必要

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

Filter => Pipe
Template Syntax

#
Template Syntax
# = エレメント

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

[]
Template Syntax
ng-* => [*]

[]
Template Syntax
angular 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 Syntax
angular 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
ng-* => (*)

イベント
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-if
Built-in Directives
ng-if => *if

ng-repert
Built-in Directives
ng-repeat => *for

ng-model
Built-in Directives
ng-model => [(ng-model)]

ng-change
Built-in Directives
ng-change => (ng-model-change)

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

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

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

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

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

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

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

Shadow Dom
Component指向
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-cli
angular-cli

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

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

angular1脳で見るangular2

More Related Content

What's hot (20)

Similar to angular1脳で見るangular2 (15)

angular1脳で見るangular2