如何使用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提供任何便捷方法以与服务交互）。