如何使用 Angular 正确开发它？

Question

您好，这是我的第一个问题，我不确定如何正确表述它，但它是这样的：

我有这段代码可以正确地填充我的容器：

<div class="container" > 
         <div class="row" id="bets" ng-app="betsApp" ng-controller="betsController">
            <div ng-repeat="bet in betsList" class="item col-lg-3 col-sm-4 col-xs-6">
              <a href="pages/match.html">
                <p id="timer"></p>
                <img src="http://placehold.it/800x600" class="img-matchs img-responsive"></img>
              </a>
              <br></br>
            </div>
        </div>
</div>

它会创建一个图像网格，每个图像代表一场比赛/投注。现在，当用户单击一个图像时，我必须将他/她重定向到我已经开发的匹配页面，并且我想使用有关该特定匹配的数据来完成，当然使用 Angular。 我的问题是：解决这个问题的最佳方法是什么？我一直在阅读有关 Angular 路由和 UI-Routing 的文章（如果我没记错的话，它适用于我没有使用的一个视图）。这是我设计的主要疑问。

这是主应用程序的代码：

angular.module('betsApp', [
  'betsApp.controller'
]);

还有控制器：

angular.module('betsApp.controller', []).
controller('betsController', function($scope) {

    $scope.betsList = //get the betsList 

});

如果有其他（更简单、更快）的方法可以做到这一点，我愿意接受建议。希望我已经足够清楚了。

编辑：如果您能提供一个最好的编码示例。

Answer 1

使用路线听起来非常好。您将使用此功能描述一个单页 Web 应用程序，它有几个优点，其中最大的是速度。如果没有 js、css、图像等的同步重新加载，用户体验会很好。

您提到您没有“拥有”视图，但调整您的代码以使用视图应该是微不足道的。这方面的文档比较友好。

编辑

我假设您有办法让页面通过 AJAX 加载投注/比赛视图的详细信息。如果您还没有为此设计后端，这将是一个更大的时间投资。但这是一个很好的学习模式。