How to load ng-repeat when switching with routes? - angularjs

Question

I want to load the data from the api when i click the route instead of the button i have atm.
i tried calling the function with ng-click on the index.html but it didnt work.
routes:
import { app } from "../index";
app.config(function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix("!");
$routeProvider
.when("/drivers", {
templateUrl: "./src/pageDetails/drivers.html",
})
.when("/teams", {
templateUrl: "./src/pageDetails/teams.html",
})
.when("/races", {
templateUrl: "./src/pageDetails/races.html",
});
});
app controller:
import {app} from '../index';
app.controller("api", function($scope, $http) {
$scope.Naziv = "Driver Championship Standings - 2013";
$scope.TopDrivers = function () {
console.log("i been pressed");
$http.get("https://ergast.com/api/f1/2013/driverStandings.json")
.then(function successCallback(response) {
$scope.drivers = response.data.MRData.StandingsTable.StandingsLists[0].DriverStandings;
console.log("response.data.MRData.StandingsTable.StandingsLists.0.DriverStandings");
console.log(response.data.MRData.StandingsTable.StandingsLists[0].DriverStandings);
}, function errorCallback(response) {
console.log("Unable to perform get request");
});
}
});
my ng-repeat
<div ng-controller="api">
<p>{{Naziv}}</p>
<button ng-click="TopDrivers()">Test Rest</button>
<div ng-repeat="x in drivers | orderBy: '+Points'">
<div id="divRow">
<table>
<tr id="tableRow">
<td id="td1">Nb: {{x.position}}</td>
<td id="td2">
{{x.Constructors[0].nationality}} {{x.Driver.givenName}} {{x.Driver.familyName}}
</td>
<td id="td3">{{x.Constructors[0].name}}</td>
<td id="td4">Points{{x.points}}</td>
</tr>
</table>
</div>
</div>
</div>
index.html how the route is called
<p class="leftText" id="firstPLEft">
<img class="leftPictures" src="img/drivers.png" alt="DriversPng">
Drivers
</p>
i want to load the api and have it give me the ng-repeat results when i switch to the route instead of when i click the button in the route.

Answer 1

How about using ng-init
<div ng-controller="api" ng-init="TopDrivers()">
<p>{{Naziv}}</p>
<buttonTest Rest</button>
<div ng-repeat="x in drivers | orderBy: '+Points'">
<div id="divRow">
<table>
<tr id="tableRow">
<td id="td1">Nb: {{x.position}}</td>
<td id="td2">
{{x.Constructors[0].nationality}} {{x.Driver.givenName}} {{x.Driver.familyName}}
</td>
<td id="td3">{{x.Constructors[0].name}}</td>
<td id="td4">Points{{x.points}}</td>
</tr>
</table>
</div>
</div>
</div>
Or, you can use resolve in $routeProvider:
app.factory("someService", function($http){
return {
getData: function(){
return $http.get("https://ergast.com/api/f1/2013/driverStandings.json");
}
};
});
and in config:
$routeProvider
.when("/drivers", {
templateUrl: "./src/pageDetails/drivers.html",
controller: "api",
resolve: {
message: function(someService){
return messageService.getData();
}
})
.when("/teams", {
templateUrl: "./src/pageDetails/teams.html",
})
.when("/races", {
templateUrl: "./src/pageDetails/races.html",
});
A sample demo on how to use it