More Related Content
Similar to サーバサイドで動的にhtml生成していたりjQueryをガッツし使っている既存プロジェクトにAngularJSを部分的につっこんでみた @jscafe21 (20)
サーバサイドで動的にhtml生成していたりjQueryをガッツし使っている既存プロジェクトにAngularJSを部分的につっこんでみた @jscafe21
- 6. - step1 : データバインディングで効率化
- step2 : 共通モジュールをディレクティブ化
- step3 : 中規模程度の新機能をSPAっぽく
担当プロジェクトでのAngular導入ステップ
- 7. - step1 : データバインディングで効率化 ✓
- step2 : 共通モジュールをディレクティブ化 ✓
- step3 : 中規模程度の新機能をSPAっぽく
担当プロジェクトでのAngular導入ステップ
- 17. {
" "bannerDataList":null,
" "boxLevelBonusAchieveLevel":1,
" "boxLevelBonusList":[],
" "completeFlg":false,
" "completePoint":0,
" "countRewardDataList":null,
" "currentPoint":327,
" "currentRank":27910,
" "deliveryCount":0,
" "deliveryCountRewardDataList":null,
" "orderPoint":0,
" "pointRewardDataList":[
" " {
" " " "categoryName":"アクセサリ/手系",
" " " "count":1,
" " " "dataItemFlg":false,
" " " "imageUrl":"shop/clothes/acceh/acceh_10824494_shop.png",
" " " "itemId":10824494,
" " " "itemName":"ふしぎな実",
" " " "itemRare":0,
" " " "rewardPoint":300
" " }
" ],
" "restRewardCount":55,
" "resultCd":0,
" "token":null
}
あるAPIでこのようなjsonが返ってくるとする
- 18. {
" "bannerDataList":null,
" "boxLevelBonusAchieveLevel":1,
" "boxLevelBonusList":[],
" "completeFlg":false,
" "completePoint":0,
" "countRewardDataList":null,
" "currentPoint":327,
" "currentRank":27910,
" "deliveryCount":0,
" "deliveryCountRewardDataList":null,
" "orderPoint":0,
" "pointRewardDataList":[
" " {
" " " "categoryName":"アクセサリ/手系",
" " " "count":1,
" " " "dataItemFlg":false,
" " " "imageUrl":"shop/clothes/acceh/acceh_10824494_shop.png",
" " " "itemId":10824494,
" " " "itemName":"ふしぎな実",
" " " "itemRare":0,
" " " "rewardPoint":300
" " }
" ],
" "restRewardCount":55,
" "resultCd":0,
" "token":null
}
枠部分(報酬アイテム情報)を表示したい
- 19. <div>
" <div>
" <img src="http://img.atgames.jp/sp/update/2014/04/icon_point.png">
" " <span id=”reward_span_reward_point”></span>達成
" </div>
" <div><img id=”reward_img_reward_url”></div>
" <div id=”reward_div_reward_itemname”></div>
" <div id=”reward_div_reward_itemcount”></div>
</div>
var reward = data.pointRewardData[0];
jQuery(“#reward_span_reward_point”).html(reward.rewardPoint);
jQuery(“#reward_img_reward_url”).attr('src', reward.imageUrl);
jQuery(“#reward_div_reward_itemname”).html(“<em>” + reward.categoryName +
“</em><br>” + reward.itemName);
jQuery(“#reward_div_reward_itemcount”).html(“×” + reward.count);
.html
.js
これまで自分がjQueryで書いてた方法(もっとキレイに書ける?汗)
- 20. AngularJSで書いた方法。ロジック側の記述が楽
<div>
" <div>
" " <img src="http://img.atgames.jp/sp/update/2014/04/icon_point.png">
" " <span>{{pointRewardData.rewardPoint}}</span>達成
" </div>
" <div><img src="http://img.atgames.jp/{{pointRewardData.imageUrl}}"></div>
" <div><em>{{pointRewardData.categoryName}}</em><br>{{pointRewardData.itemName}}</div>
" <div ng-show="pointRewardData.count > 1">×{{pointRewardData.count}}</div>
</div>
$scope.pointRewardDataList = pointRewardDataList;
.html
.js
- 25. <p>{{rank}}</p>
<script>
var setupAngular = function(){
" var _scope = angular.element(ngCtrl).scope();
" _scope.$apply(function(){
" " _scope.rank = $!{rank};
" });
};
</script>
.html
.js
$scope.rank = 0;
angular.element(document).ready(function() {
" if(setupAngular && typeof setupAngular === "function"){
" " setupAngular(); //本体htmlのグローバルメソッドにアクセス
" }
});
html側のスクリプトにvelocityで吐き出される値を書き出して、、、
みたいなことをやってる。しかも不要にグローバル変数をつくってしまってる
- 30. ディレクティブ化する前
イベント毎にソースをコピペして、値の一部を変えることで対応していた(惰性)
<canvas id=” canvas_100522”></canvas>
<script>
(function(){
" var self = {}, canvas, stage, exportRoot,
" POS_X = 0, POS_Y = 0, SCALE = 0.55; //※ここ調整する
"
" self.init = function() {
" " canvas = document.getElementById("canvas_100522");
" " df100522_images = df100522_images||{};
" " var len = df100522.properties.manifest.length;
" " for(var i = 0; i < len; i++){
" " " var url = df100522.properties.manifest[i].src;
" " " url = window.IMAGE_DOMAIN + "/high/roomfurniture/deco/" + url;
" " " df100522.properties.manifest[i].src = url;
" " }
" " var loader = new createjs.LoadQueue(false);
" " loader.addEventListener("fileload", self.handleFileLoad);
" " loader.addEventListener("complete", self.handleComplete);
" " loader.loadManifest(df100522.properties.manifest);
" }
" self.handleFileLoad = function(evt) {
"" if (evt.item.type == "image") { df100522_images[evt.item.id] = evt.result; }
" }
" self.handleComplete = function() {
"" //ここは省略
" }
" window.selfytown.df100522_shop = self;
}());
</script>
.html
- 31. ディレクティブ化する
.directive('df', function() {
" return {
" " restrict: 'E',
" " transclude: true,
" " scope: {
" " " furnitureid: '@',
" " " category: '@',
" " " posx: '@',
" " " posy: '@',
" " " scale: '@'
" " },
" " template:
" " " '<canvas id="js_canvas_dynamic_furniture_{{furnitureid}}"></canvas>',
" " link:function($scope, $element){
" " " var canvas,
" " " " len,
" " " " url,
" " " " loader,
" " " " exportRoot,
" " " " stage;
" " "
" " " canvas = $element[0];
" " " len = window["df" + $scope.furnitureid].properties.manifest.length;
" " " for(i = 0; i < len; i++){
" " " " url = window["df" + $scope.furnitureid].properties.manifest[i].src;
" " " " url = window.IMAGE_DOMAIN + "/high/roomfurniture/" + $scope.category + "/" + url;
" " " " window["df" + $scope.furnitureid].properties.manifest[i].src = url;
" " " }
" " " //CreateJSまわりの処理は省略
" " },
" " replace: true
" };
});
.js