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.

ngJapan報告会

1,893 views

Published on

angular

Published in: Technology
  • Be the first to comment

ngJapan報告会

  1. 1. Angularが好き?
 ∼ ngJapan総まとめ ∼ @albatrosary http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/
  2. 2. 佐川 夫美雄 HTML5 Experts.jp エキスパート html5j(スタッフ) AngularJS Japan User Group(スタッフ)(Fumio SAGAWA)
  3. 3. http://kagoshima.html5j.org/html5conference.2015/
  4. 4. http://ngjapan.org/
  5. 5. http://ngjapan.org/
  6. 6. New Router Pluralization and Gender support ng-animate update ng-message update ng-cookies update
  7. 7. リリースサイクル
  8. 8. Angularコミュニティ 10万人 1600ほどの新しいissueやPR 新しい200ほどのコントリビュータが新しいPRやissueを立てていたり、 
 ドキュメントを修正するということを行っています
 (二週間の間に)
  9. 9. HTML5ハイブリットアプリ用のUIフレームワーク Angularをベースにしている iOS, Androidをサポートしている 高速な動作
  10. 10. Angularのルーティング コンポーネントに対してマッピング
  11. 11. $routeConfig angular.model('example', [ 'example.goobye', 'example.welcame', 'ngAnimate', 'ngNewRouter' ]) .controller('AppController', ['$router', AppController]); AppController.$routeConfig = [ { path: '/', redirectTo: '/welcome' }, { path: '/welcame', component: 'welcome' }, { path: '/goodbye', component: 'goodbye' } ]; function AppController($router) { this.greeting = Hello'; }
  12. 12. ng-link <body ng-app="example" ng-strict-di ng-controller="AppController as app"> <nav> <ul> <li><a ng-link="welcame">welcame</a></li> <li><a ng-link="goodbye">goodbye</a></li> </ul> </nav> <ng-viewport></ng-viewport> </body>
  13. 13. ngViewport プレスフォルダに対しアクセス プレスフォルダの中はコンテンツに基づいて管理
  14. 14. Sibling Routes AppController.$routeConfig = [ { path: '/', redirectTo: '/users/posts' }, { path: '/users/posts', components: { left: 'users', right: 'posts' } }, { path: '/posts/users', components: { left: 'posts', right: 'users' } } ];
 
 <nav> <a href="./users/posts">users then posts</a> <a href="./posts/users">posts then users</a> </nav> <div class="container"> <div ng-viewport="left"></div> <div ng-viewport="right"></div> </div>
  15. 15. マイグレーション - NewRouterは、Angular 1からAngular 2へのマイグレーションを簡単にする Angular 1とAngular 2とで同じコンフィグレーションを使っ ていく 新しいRouterを使っていくことで一部はAngular 1で他の一 部Angular 2で動く
  16. 16. ECMAScriptとは JavaScriptの元となる仕様のこと DOMの仕様は入っていない 最近のブラウザはECMAScript 5をサポート そろそろ6の仕様が確定(現在RC2)
  17. 17. AtScriptとは AtScript=ES6+A 
 (A=Annotiosion, AnnotationはES6に含まれない) Super set of TypeScript
  18. 18. TypeScriptとは TypeScriptはJavaScriptを拡張した言語 静的型付け ECMAScript6規格の文法を取り込み中 読みやすい変換後JavaScript Java, C#とかにやさしい言語仕様
  19. 19. Angular 2とTypeScript TypeScriptに必要な機能が入る Angularチームが作りたいのはAtScriptではなく Angular本体 TypeScriptのスーパーセットを作るのが困難
  20. 20. なぜAngular 2を作ることにしたのか Angular 2はどういうものにあるのか いつ出てくるか
  21. 21. のくらい使われてる?
  22. 22. Angular 2 - 機能 Viewports New languages Web Components New template syntax Unidirectional data flow Ultra-fast change detection
  23. 23. Angular 2 生産性向上 パフォーマンス向上
  24. 24. パフォーマンス
  25. 25. https://angular.io/
  26. 26. https://angular.github.io/router/
  27. 27. vs React ReactとAngular 2はゴールが一緒でアプローチが違うだけ AngularのチームとReactのチームはコミュニケーションを とっている
  28. 28. <ng-thanks>

×