Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (18)
En vedette
Similaire à Angular jsとsinatraでturbolinks
Similaire à Angular jsとsinatraでturbolinks (20)
Angular jsとsinatraでturbolinks
- 3. クライアントサイドMVC？ ▪要は View が DOM で Model が JavaScript のオブジェクト ▪DOM と Model の状態を同期させたい なーというときに AngularJS がよしな にしてくれる ▪データバインディング
- 4. データバインディング View <div ng-controller="MyCtrl"> {{message}} </div> Controller function MyCtrl($scope){ $scope.message = "Hello, World!"; }
- 5. もっとデータバインディング View <div ng-controller="MyCtrl"> count = {{count}} </div> <button ng-click= "countup()"> Controller function MyCtrl($scope){ $scope. count = 0; $scope.coutup=function(){ $scope.count++; } }
- 11. 対応策 ▪ 最初にページをロードした時はサーバサイドで生成したビュー を表示 ▪ ページ内リンクはAjaxイベントに置き換えて、リンク移動する ときはコンテンツだけ動的に書き換え ▪ 書き換えるコンテンツはAPIから取得してJavaScript側で生成 PushState=URL変更のイベントをJavaScript側で管理できる
- 12. そんなんできるの？=> YES ngView <div ng-view> </div> ngRoute app.config( function($routeProvider){ $routeProvider. when("/page1", { templateUrl: "/page1. html" }); } );
- 13. そんなんできるの？=> YES ngView <div ng-view> </div> ngRoute app.config( function($routeProvider){ $routeProvider. when("/page1", { templateUrl: "/page1. html" }); } ); ここにpage1. htmlの内容 が挿入される ページ遷移を乗っ取って、 Ajaxイベントに置き換える
- 16. Turbolinks ▪ Railsでpjax(pushState + Ajax)するためのプラグイン ▪ Rails4でデフォルトで入るように ▪ JavaScriptページ遷移したように見せかける – ボディとタイトルをAjaxでごっそり入れ替え – URLはpushStateで置き換え ▪ JavaScript、CSSの再読み込みが発生しない ▪ DOMも再読み込みしない
- 18. 同じ・・・ Railsでよくね？
- 19. 結論が出ました！それはそれとして・・・ ▪ AngularJSは便利なので使っていきたい – TurbolinksとAngularJSの同時使用は相性悪い ▪ Sinatraで作ってしまったので作りなおすのめんどい ▪ Rails重い
- 21. 続きはLive Demoで！