Can anyone assist me with an error I'm encountering while setting routes on two buttons? Despite having everything properly defined, the table is not displaying any data. Your insights would be greatly appreciated.
Thank you for your help.
Snippet from the main HTML file:
//main controller mainCtrl.js:
angular.module("myApp", [])
.controller('myAppCtrl',['getStockData','corsService','$scope', function(getStockData ,corsService, $scope) {
corsService.enableCors();
getStockData.getData().then(function(data){
$scope.products = data;
console.log("hello from ctrl",data);
});
}])
.controller('salesCtrl', function(getSalesData, $scope){
getSalesData.getData().then(function(data){
$scope.salesData = data;
console.log(data);
})
})
var app = angular.module("myApp");
//------------------------------------------------------------------------------
//route provider: routeProvider.js:
angular.module("myApp", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider.when("/products", {
templateUrl: "views/productsView.html",
// controller:"myAppCtrl"
})
.when("/sales", {
templateUrl: "views/salesView.html",
})
.otherwise({
templateUrl: "views/productsView.html",
// controller: "myAppCtrl"
});
})
.controller("routeCtrl" ,function ($scope, $location){
$scope.setRoute=function(route){
$location.path(route);
}
});
//---------------------------------------------------------------------------------
//getting the data getStockData.js:
app.service('getStockData', function($http){
var dataUrl = "https://someAPI";
return {
getData: function() {
var successCallback = function (response){
//the response object
console.log("the response object:", response);
return response.data;
}
var errorCallback =function (reason){
//the reason of error message
console.log("error", reason.data);
return reason.data;
}
//Returns a Promise that will be resolved
// to a response object when the request succeeds or fails.
return $http.get(dataUrl)
.then(successCallback, errorCallback);
}
}
});<body>
<div class="navbar navbar-inverse">
<a class="navbar-brand" href="#">Beerbay</a>
</div>
<div ng-controller="routeCtrl" class="col-sm-1">
<a ng-click="setRoute('products')"
class="btn btn-block btn-primary btn-lg">Products</a>
<a ng-click="setRoute('sales')"
class="btn btn-block btn-primary btn-lg">Sales</a>
</div>
<ng-view />
</body>
<!--the partial view: productsView.html----------------------------------------->
<div class ="col-sm-11" ng-controller="myAppCtrl">
<!--displaying the data-->
<h4>Products</h4>
<table id="product_table" class="table">
<thead>
<tr>
<!-- table headers removed for brevity-->
</tr>
</thead>
<tbody>
<tr ng-repeat = "item in products|orderBy: 'name'">
<!-- table body removed for brevity-->
<!-- here I am displaying the products from the $scope-->
</tr>
</tbody>
</table>
</div>
<!--the other partial view: salesView--------------------------------------------->
<body>
<p>This is the sales view</p>
</body>