Dan Romulus Dan Romulus - 3 months ago 16
AngularJS Question

Angularjs: Error: [ng:areq] Argument 'myAppCtrl' is not a function, got undefined when using routes with ngRoute and $routeProvider

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://beerbayapp.appspot.com/stock";
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>




Answer

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.