あの時AngularJSと出会った僕らは
Upcoming SlideShare
Loading in...5
×
 

あの時AngularJSと出会った僕らは

on

  • 1,414 views

 

Statistics

Views

Total Views
1,414
Views on SlideShare
866
Embed Views
548

Actions

Likes
6
Downloads
2
Comments
0

4 Embeds 548

http://stackstock.net 429
https://twitter.com 100
http://s.deeeki.com 15
http://feedly.com 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

あの時AngularJSと出会った僕らは あの時AngularJSと出会った僕らは Presentation Transcript

  • あの時AngularJSと出会った僕らは 春のJavaScript祭り
  • {{about-me}} 名前 所属 職種 Facebook Twitter Blog Mail むゆう フリーランス IT僧侶, Webエンジニア http://facebook.com/muyuu/ http://twitter.com/anticyborg/ http://stackstock.net/ anticyborg@gmail.com
  • jQueryつらい(´・_・`)
  • {{DOM-select}} $(function(){ $(‘.news .btn’).on(‘click’, function(){ $(this).parent() .next() .find(‘.item’) .addClass(‘splash’); } });
  • 密結合になりがち
  • {{view-update}} $(function(){ $(‘.btn’).on(‘click’, function(){ // 何か色々処理 view_update(obj); } $(‘.prefList’).on(‘change’, function(){ // 何か色々処理 view_update(obj); } });
  • いろんなとこでDOMの更新関数
  • なんだかなー(´・_・`)
  • HTMLがテンプレート
  • {{html-template}} <body ng-app> <h1>Hello! I’m {{‘muyuu’ + ‘!!’}}</h1> </body>
  • <body ng-app> <p>1 + 2 = {{1 + 2}}</p> </body> {{html-template}}
  • 双方向データバインディング
  • {{2way-data-binding}} <body ng-app> <div> <label>name:</label> <input type=‘text’ ng-model=‘myName’> </div> <p>Hello! I’m {{myName}}!!</p> </body>
  • <body ng-app> <div> <label>name:</label> <input type=‘text’ ng-model=‘myName’> </div> <p>Hello! I’m {{myName}}!!</p> </body> {{2way-data-binding}}
  • <body ng-app> <div> <label>name:</label> <input type=‘text’ ng-model=‘myName’> </div> <p>Hello! I’m {{myName}}!!</p> </body> {{2way-data-binding}}
  • repeat
  • {{repeat}} <body ng-app=‘itemApp’> <ul ng-controller=‘itemCtrl’> <li ng-repeat=‘item in items’> <p>name: {{item.name}}</p> <p>price: {{item.price}}</p> </li> </ul> </body>
  • filter
  • {{filter}} <body ng-app="itemApp"> <input type="text" ng-model="query"> <ul ng-controller="itemCtrl"> <li ng-repeat="item in items | filter:query"> <p>name: {{item.name}}</p> <p>price: {{item.price}}</p> </li> </ul> </body>
  • <body ng-app="itemApp"> <input type="text" ng-model="query"> <ul ng-controller="itemCtrl"> <li ng-repeat="item in items | filter:query"> <p>name: {{item.name}}</p> <p>price: {{item.price}}</p> </li> </ul> </body> {{filter}}
  • <body ng-app="itemApp"> <input type="text" ng-model="query"> <ul ng-controller="itemCtrl"> <li ng-repeat="item in items | filter:query"> <p>name: {{item.name}}</p> <p>price: {{item.price}}</p> </li> </ul> </body> {{filter}}
  • routing
  • {{routing}} デモ
  • まとめ
  • {{まとめ}} • 双方向データバインディングやばい • 双方向データバインディングやばい • 双方向データバインディングやばい
  • {{まとめ}} • htmlがテンプレートになるから分かりやすい • 双方向データバインディングやばい • ルーティング機能でSPA • htmlが進化する!
  • おわりに
  • 世はJavaScript戦国時代
  • 次から次に新しい ライブラリが出てくる
  • 「そんなにいっぱい覚えてる 時間ねーんだよ!!」
  • 「今まだjQueryクラスのシェ アがないから投資時間が無駄に なるかもだし様子見」
  • わーかーるー
  • でもそれじゃ何も変われない
  • 1歩踏み出せば必ず 何かの力になる
  • それを続けていけば 戦国時代を勝ち抜く力もつく
  • 触り始めるのに敷居が凄く高い ライブラリはそんなにない
  • Don’t think Write code