I am getting this error trying to set routes on 2 buttons. Please help me to find the reason for getting this error since everything looks in place and defined. The routes are working but I am not getting any data in the table.
I have: <html ng-app="myApp"> in the main htlm and the modules are not redefined anywhere. I checked other similar posts but I didn't find anything to address my problem.
Thank you.
The main html file snippet:
//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>you are declaring myApp modules two times
1 ) angular.module("myApp", [])
2 ) angular.module("myApp", ["ngRoute"])
you are defining myAppcontroller on first module and after thatagain you declare same module
define mudule only once , after that you can access it like
var module = angular.module("myApp");
make these changes.