如何使用AngularJS/Firebase處理建模數據 - 何時使用控制器？

Question

我正在製作ESPN的Steak for the Cash的副本，以學習AngularJS & Firebase。理由是數據可以是實時的，僅僅是因爲我想了解它並且認爲它比使用Node/Mongo作爲後端開始更容易。

對於那些不知道什麼牛排是現金的人，基本上你會回答有關當天正在進行的體育賽事的兩種方式之一的問題，並且基於該月建立贏/輸記錄多少你得到的是/錯。

因爲我一直在研究這個問題，我想出了一個更具體的問題，如果這可能更容易回答： 所以我有「道具」或問題，每個問題都會有幾個「選擇」。還需要有與該問題相關的答案。我還想爲這些問題添加評論。

舉個例子： 支柱 - 誰將獲得更多積分？ 選項A - 德里克·羅斯 選項B - 詹姆斯 答案 - 德里克·羅斯 Comment-「啊我認爲這將是勒布朗」（該用戶將最終得到一個雙贏/損失加入到他們的戰績爲好）

我有一個遊戲控制器&服務。在遊戲服務中，我有「var Game = {」與添加/刪除遊戲的方法。我也有「addQuestion」的方法，它的工作原理。該方法中的代碼是「遊戲。$ child（gameId）。$ child（'props'）。$ add（prop）;」

對於選項，答案和評論，我的做法與上面相同嗎？把他們全部投入到遊戲控制器中？ 他們什麼時候得到他們自己的控制器或服務？對於選項，我會有類似「遊戲。$ child（gameId）。$ child（'props'）。$ child（'options'）」等等，但對我來說這似乎效率低下。此外，我不知道如何獲取propId，因爲我在gameview中有gameId的gameview.html頁面。

/controllers/gameview.js

'use strict'; 

app.controller('GameViewCtrl', function($scope, $routeParams, Game) { 
    $scope.game = Game.find($routeParams.gameId); 

    $scope.addProp = function() { 
    Game.addProp($routeParams.gameId, $scope.prop); 
    $scope.prop = ''; 
    }; 

    $scope.deleteProp = function(prop, propId) { 
    Game.deleteProp($scope.game, prop, propId); 
    }; 

    $scope.addOption = function() { 
    Game.addOption($routeParams.propId, $scope.option); 
    }; 
}); 

/services/Game.js

'use strict'; 

app.factory('Game', 
    function ($firebase, FIREBASE_URL) { 
    var ref = new Firebase(FIREBASE_URL + 'games'); 

    var games = $firebase(ref); 

    var Game = { 
    all: games, 
    create: function(game) { 
     return games.$add(game); 
    }, 
    find: function(gameId) { 
     return games.$child(gameId); 
    }, 
    delete: function(gameId) { 
     return games.$remove(gameId); 
    }, 

    addProp: function(gameId, prop) { 
     prop.gameId = gameId; 

     games.$child(gameId).$child('props').$add(prop); 
    }, 
    deleteProp: function(game, prop, propId) { 
     game.$child('props').$remove(propId); 
    }, 

    addOption: function(propId, option) { 
     option.propId = propId; 

     games.$child(propId).$child('options').$add(option); 
    } 

    // addPropOption: function() 
    }; 

    return Game; 
}); 

/views/showgame.html

<div> 
    <strong>{{ game.home }}</strong> 
    <span class="vs">vs</span> 
    <strong>{{ game.away }} </strong> 
    <div ng-repeat="(propId, prop) in game.props"> 
    <span>{{ prop.text }}</span> 
    <button ng-click="deleteProp(game,propId)" type="button" class="btn btn-danger">Delete Prop</button> 
    </div><!-- 
    <button type="button" class="btn btn-danger" ng-click="deleteGame(gameId)">Delete Game</button> --> 
    <div ng-rpeat="optionId, option) in prop.options"> 
    <span>{{ option.text }}</span> 
    </div> 
</div> 

<form ng-submit="addProp()"> 
    <textarea ng-model="prop.text" placeholder="Enter Prop Here" class="form-control"></textarea> 
    <input type="submit" value="Add Prop" class="btn btn-primary" /> 
</form> 

<form ng-submit="addOption()"> 
    <textarea ng-model="option.text" placeholder="Enter Prop Option Here" class="form-control"></textarea> 
    <input type="submit" value="Add Option" class="btn btn-primary" /> 
</form> 
<a href="#/games">Back to Games</a> 

對於它的價值，我」 ma前端開發人員，但是在幾個星期前我還沒有使用過任何Javascript框架，當時我通過了幾項工作www.thinkster.io（偉大的東西順便說一句）。

Answer 1

根據對控制器的角度引導，你應該：

使用控制器：

• 搭建$範圍對象的初始狀態。
• 將行爲添加到$ scope對象。

不要用控制器：

• 操作DOM - 控制器應該只包含業務邏輯。將任何表示邏輯放入控制器中會嚴重影響其可測試性。 Angular對大多數情況和指令進行了數據綁定，以封裝手動DOM操作。
• 格式輸入 - 使用角度控件代替。
• 過濾器輸出 - 改用角度過濾器。
• 跨控制器共享代碼或狀態 - 改用角度服務。
• 管理其他組件的生命週期（例如，創建服務實例）。

因此，對於任何複雜的應用程序，上面討論過的大多數事情都屬於服務/工廠。您的控制器應該只處理從這些服務獲取的數據並將其應用於$ scope（並且爲DOM提供任何便捷方法以與服務交互）。