Greetings, this marks the beginning of my inquiry and I must admit that articulating it correctly might be a challenge. Nevertheless, here's my attempt:
Within the following code snippet, there lies an element that effectively fills up my designated container:
<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>
This grid comprises images, each symbolizing a match or bet. Now, as I advance to the phase where a user clicks on an image and needs to be redirected to the corresponding match page - one which has been developed already, awaiting completion with the relevant match data through Angular.
My quandary is: What would be the optimal strategy to tackle this issue? I've delved into resources discussing Angular routing and UI-Routing (which seems pertinent to single views, not applicable here). This is the crux of my uncertainty in terms of design.
Provided below is the core app code snippet:
angular.module('betsApp', [
'betsApp.controller'
]);
Followed by the controller segment:
angular.module('betsApp.controller', []).
controller('betsController', function($scope) {
$scope.betsList = //retrieve the betsList
});
I remain receptive to alternative (perhaps simpler, quicker) methodologies to address this dilemma. I trust that my explanation has been coherent and thorough.
EDIT: Any exemplar code provided would be highly appreciated.