Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
angular 1 脳で見るangular 2
自己紹介
株式会社シーエーアドバンス
新川盛幸
業務系社内システム
ruby on rails、angularjs
話すこと
1. 特徴
2. Template Syntax
3. Built-in Directive
4. Component指向
5. angular-cli
angularjsを触った事ある人向けに
なるべくangular1でいうコレがa...
Version
今から説明する事は、versionが変わっていろいろ更新される部分もあるかもしれません
が、どんな感じで書くのか、だいたいのイメージができればいいかなと思ってます。
試したversion = v2.0.0-alpha.44
今 ...
特徴
速度
特徴
変更検知
特徴
開発言語の選択
angular2は生のjavascriptでも書けますが、typescript、dartなどのAltJSを選択して開発
できます。
普段はrubyに似た構文で書けるcoffeescriptで開発していますが、angularが推奨...
例
特徴
angular1とどのくらい変わったか比較
angular2でも開発言語の選択での違いを比較
<my-app>タグを<h1>にする
簡単なディレクティブの定義の例
Angular 1
特徴
特徴
ng-appもng-controllerもなく、まとめてコンポーネント
(ディレクティブ)
$scopeもなくなり、thisを使う
TypeScript
特徴
TypeScript
特徴
Controller
Directive
必要なモジュールを
ロード
一番上の層のComponentは
bootstrapが必要
Template Syntax
{{}}
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 [hre...
[]
Template Syntax
angular 1.x angular 2.x
<div ng-style=”color:red”> <div [style.color]=”red”>
<div [style.width.px]=”20”...
()
Template Syntax
() = イベントバインディング
()
Template Syntax
ng-* => (*)
イベント
Template Syntax
<button ng-click=”onClick()”> <button (click)=”onClick()”>
<button ng-keyup=”keyup()”> <button (keyup...
[()]
Template Syntax
[()] = 双方向データバインディング
[()]
Template Syntax
[()]
Template Syntax
角カッコ(プロパティバインディング )
[ng-model]だけでは値は入るが、変更
は検知しない
丸カッコ(イベントバインディング )
(ng-model-change)を利用して変更さ
れた値をna...
[()]
Template Syntax
[()]
Template Syntax
[] = プロパティ = ModelからViewへ
() = イベント= ViewからModelへ
[()] = 両方 = 双方向
Built-in Directives
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)
Component指向
Conponent
ConponentはController(ロジック)やView(html)を含んでいるパーツ
ログインフォームだったりメニューだったりをConponent化してまとめて作っていきます。
Component指向
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のクラス名...
Shadow Dom
Component指向
my-componentは
BootstrapのCSSは当たるが
Shadow Dom
Component指向
my-componentがstyleUrlで
呼び出したcssは外部に影響しない
Componentの構造
Conponentの中に他のConponentを子として持ち、ツリー構造でアプリケーションを作っ
ていきます。
親は子にデータを渡したり、子は親にイベントを通知したりできます。
angular1でいう$scope.$b...
Componentの構造
Conponent指向
親から子へ(attribute)
Component指向
親から子へ(attribute)
Component指向
親が名前や年齢を渡す
子は@Inputで受け取る
子から親へ(event)
Component指向
子から親へ(event)
Component指向
親は子で定義された
eventを受け取る
子はEventEmitterを使って
eventを作る
作成したEventEmitterを
使ってeventを発行
angular-cli
https://github.com/angular/angular-cli
angular-cli
サーバー動かしたりlive-reloadとかtypescriptのコンパイルとか、
簡単にプロジェクトのセットアップをしてくれるnpmのパッケージ
簡単なscafoldがあったり、ディレクトリの分け方の統一ができたりする
angular-cli
SET UP
angular-cli
SCAFFOLD
angular-cli
angular1とかなり変わっていて、結構学習コストがかかりそうですが、速さの面でもメリット
が大きく、コンポーネント単位で組み立てていくangularjsは疎結合にしやすいし、一度
作ったコンポーネントの使い回しが楽そう。
紹介できたのはわず...
Upcoming SlideShare
Loading in …5
×

angular1脳で見るangular2

29,341 views

Published on

angular2についてangular1でいうアレがangular2でいうコレっていう形式で紹介したり

Published in: Internet
  • Be the first to comment

angular1脳で見るangular2

  1. 1. angular 1 脳で見るangular 2
  2. 2. 自己紹介 株式会社シーエーアドバンス 新川盛幸 業務系社内システム ruby on rails、angularjs
  3. 3. 話すこと 1. 特徴 2. Template Syntax 3. Built-in Directive 4. Component指向 5. angular-cli angularjsを触った事ある人向けに なるべくangular1でいうコレがangular2でいうアレっていう形で話せればと思います。
  4. 4. Version 今から説明する事は、versionが変わっていろいろ更新される部分もあるかもしれません が、どんな感じで書くのか、だいたいのイメージができればいいかなと思ってます。 試したversion = v2.0.0-alpha.44 今 = v2.0.0-alpha.46
  5. 5. 特徴
  6. 6. 速度 特徴
  7. 7. 変更検知 特徴
  8. 8. 開発言語の選択 angular2は生のjavascriptでも書けますが、typescript、dartなどのAltJSを選択して開発 できます。 普段はrubyに似た構文で書けるcoffeescriptで開発していますが、angularが推奨して るっぽいのでtypescriptを使用した説明をします。 typescriptは次期javascriptの仕様となるES6由来の構文で書け、IDEのサポートも受けれ ます。 特徴
  9. 9. 例 特徴 angular1とどのくらい変わったか比較 angular2でも開発言語の選択での違いを比較 <my-app>タグを<h1>にする 簡単なディレクティブの定義の例
  10. 10. Angular 1 特徴
  11. 11. 特徴 ng-appもng-controllerもなく、まとめてコンポーネント (ディレクティブ) $scopeもなくなり、thisを使う
  12. 12. TypeScript 特徴
  13. 13. TypeScript 特徴 Controller Directive 必要なモジュールを ロード 一番上の層のComponentは bootstrapが必要
  14. 14. Template Syntax
  15. 15. {{}} Template Syntax {{}} = 展開
  16. 16. Filter => Pipe Template Syntax
  17. 17. # Template Syntax # = エレメント
  18. 18. [] Template Syntax [] = プロパティバインディング
  19. 19. [] Template Syntax ng-* => [*]
  20. 20. [] 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”>
  21. 21. [] 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”>
  22. 22. () Template Syntax () = イベントバインディング
  23. 23. () Template Syntax ng-* => (*)
  24. 24. イベント 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-* => (*)
  25. 25. [()] Template Syntax [()] = 双方向データバインディング
  26. 26. [()] Template Syntax
  27. 27. [()] Template Syntax 角カッコ(プロパティバインディング ) [ng-model]だけでは値は入るが、変更 は検知しない 丸カッコ(イベントバインディング ) (ng-model-change)を利用して変更さ れた値をnameに入れる
  28. 28. [()] Template Syntax
  29. 29. [()] Template Syntax [] = プロパティ = ModelからViewへ () = イベント= ViewからModelへ [()] = 両方 = 双方向
  30. 30. Built-in Directives
  31. 31. ng-if Built-in Directives ng-if => *if
  32. 32. ng-repert Built-in Directives ng-repeat => *for
  33. 33. ng-model Built-in Directives ng-model => [(ng-model)]
  34. 34. ng-change Built-in Directives ng-change => (ng-model-change)
  35. 35. Component指向
  36. 36. Conponent ConponentはController(ロジック)やView(html)を含んでいるパーツ ログインフォームだったりメニューだったりをConponent化してまとめて作っていきます。 Component指向
  37. 37. Conponent Component指向
  38. 38. Conponent Component指向 適用するセレクタの指定 (restrict) 'cmp' = タグ '[cmp]' = 属性 'cmp, [cmp]' = 両方 'button[cmp]' = buttonタグのcmp属性
  39. 39. Conponent Component指向 展開するテンプレートの指定 templateで直接htmlを書いてもOK
  40. 40. Conponent Component指向 適用するCSSの指定、なくてもOK
  41. 41. Conponent Component指向 View側で使用するモジュールの指定 built-in directiveだったり、作成したコンポー ネントだったり。 FORM_DIRECTIVESにはng−modelとか が入っている。 使用するモジュールのロード
  42. 42. Shadow Dom Componentが生成されるとShadow Domという要素になります。 htmlがカプセル化され、cssやjsが干渉しない要素 個人ならまだしもチームでcssを書いたり、大きいアプリケーションになるほどcssのクラス名 を全体に干渉しない名前を調べたり、htmlの子や孫セレクタで絞って適用したりするかと 思いますが、 読み込んだstyleはcomponent単位でのみ有効 Component指向
  43. 43. Shadow Dom Component指向 my-componentは BootstrapのCSSは当たるが
  44. 44. Shadow Dom Component指向 my-componentがstyleUrlで 呼び出したcssは外部に影響しない
  45. 45. Componentの構造 Conponentの中に他のConponentを子として持ち、ツリー構造でアプリケーションを作っ ていきます。 親は子にデータを渡したり、子は親にイベントを通知したりできます。 angular1でいう$scope.$broadcast、$scope.$onみたいなもの Component指向
  46. 46. Componentの構造 Conponent指向
  47. 47. 親から子へ(attribute) Component指向
  48. 48. 親から子へ(attribute) Component指向 親が名前や年齢を渡す 子は@Inputで受け取る
  49. 49. 子から親へ(event) Component指向
  50. 50. 子から親へ(event) Component指向 親は子で定義された eventを受け取る 子はEventEmitterを使って eventを作る 作成したEventEmitterを 使ってeventを発行
  51. 51. angular-cli
  52. 52. https://github.com/angular/angular-cli angular-cli
  53. 53. サーバー動かしたりlive-reloadとかtypescriptのコンパイルとか、 簡単にプロジェクトのセットアップをしてくれるnpmのパッケージ 簡単なscafoldがあったり、ディレクトリの分け方の統一ができたりする angular-cli
  54. 54. SET UP angular-cli
  55. 55. SCAFFOLD angular-cli
  56. 56. angular1とかなり変わっていて、結構学習コストがかかりそうですが、速さの面でもメリット が大きく、コンポーネント単位で組み立てていくangularjsは疎結合にしやすいし、一度 作ったコンポーネントの使い回しが楽そう。 紹介できたのはわずかですが、ajax周りとかanimationとか、まだまだ試せていないAPIが いっぱいあるのでこれから勉強していきたいです。 angular-cliで簡単にangular2を試せるのでぜひ試してみてください。 Component指向 所感

×