如何使用AngularJS/Firebase建模数据-何时使用控制器?

How to approach modeling data using AngularJS/Firebase - When do I use a controller?

本文关键字：何时使 控制器 数据 建模 何使用 AngularJS Firebase      更新时间：2023-09-26

我正在克隆ESPN的牛排现金学习AngularJS &;重火力点。原因是数据可以是实时的，只是因为我想了解它，并且认为它可能比使用Node/Mongo作为后端更容易开始。

对于那些不知道什么是"现金牛排"的人来说，基本上你要回答与当天举行的体育赛事有关的两种方式中的一种，然后根据你回答对/错的次数建立一个月的输赢记录。

当我一直在研究这个问题时，我想出了一个更具体的问题，如果这可能更容易回答:所以我有了"道具"，或者说问题，每个问题都有几个"选择"。还需要有一个与问题相关的答案。我还想对这些问题做些评论。

举例:道具-谁会得到更多的分数?选项A:德里克-罗斯选择B——勒布朗·詹姆斯答案:德里克-罗斯评论-"啊，我还以为会是勒布朗呢"(这个用户最终也会得到一个输赢记录)

我有一个游戏控制器& &;服务。在游戏服务中，我有"var Game ={"和添加/删除游戏的方法。我也有"addQuestion"的方法，它可以工作。方法中的代码是"games.$child(gameId).$child('props').$add(prop);"

对于选项、答案和注释，我是否也要这样做?把它们都扔进游戏控制器?他们什么时候得到自己的控制器或服务?对于选项，我将使用类似"games.$child(gameId).$child('props').$child('options')"之类的内容，但这对我来说似乎效率低下。另外，我不知道如何获得propId，因为我在gameview.html页面上，在URL中有gameId。

/控制器/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);
  };
});

/服务/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;
});

/视图/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>

对于它的价值，我是一个前端开发人员，但我没有使用过任何Javascript框架，直到几周前，当我通过www.thinkster.io(顺便说一句很棒的东西)上的几个教程。

根据Angular的控制器指南，你应该:

使用控制器:

    设置$scope对象的初始状态。
  • 为$scope对象添加行为。

NOT use controllers to:

  • 操纵DOM -控制器应该只包含业务逻辑。将任何表示逻辑放入控制器都会显著影响其可测试性。Angular在大多数情况下都有数据绑定和指令来封装手动DOM操作。
  • 格式输入-使用角形控件代替
  • 过滤器输出-使用角过滤器代替。
  • 在控制器之间共享代码或状态——使用angular服务代替。
  • 管理其他组件的生命周期(例如创建服务实例)。

因此，对于任何复杂的应用程序，你上面讨论的大多数东西都属于服务/工厂。您的控制器应该只处理从这些服务获取数据并将其应用于$scope(并为DOM提供与服务交互的任何方便方法)。

相关文章：