Dan Romulus Dan Romulus - 2 months ago 9
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) {


$scope.products = data;
console.log("hello from ctrl",data);
.controller('salesCtrl', function(getSalesData, $scope){
$scope.salesData = 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",
templateUrl: "views/productsView.html",
// controller: "myAppCtrl"

.controller("routeCtrl" ,function ($scope, $location){

//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);


<div class="navbar navbar-inverse">
<a class="navbar-brand" href="#">Beerbay</a>
<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>

<ng-view />


<!--the partial view: productsView.html----------------------------------------->

<div class ="col-sm-11" ng-controller="myAppCtrl">
<!--displaying the data-->
<table id="product_table" class="table">
<!-- table headers removed for brevity-->
<tr ng-repeat = "item in products|orderBy: 'name'">

<!-- table body removed for brevity-->
<!-- here I am displaying the products from the $scope-->

<!--the other partial view: salesView--------------------------------------------->

<p>This is the sales view</p>


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.