あの時angularjsと出会った僕らは
TRANSCRIPT
あの時AngularJSと出会った僕らは春のJavaScript祭り
{{about-me}}
名前
所属
職種
Blog
むゆう
フリーランス
IT僧侶, Webエンジニア
http://facebook.com/muyuu/
http://twitter.com/anticyborg/
http://stackstock.net/
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