Error: [ng:areq] Argument 'customerInquiryController' is not a function, got undefined

Question

User483994611 posted

My objective is to load a grid with server side pagination sorting . I have 2 script files routing and controller js.

My routing js looks like-

var app = angular.module('MyApp', ['ngRoute']);

app.config([

    '$locationProvider', '$routeProvider',

    function ($locationProvider, $routeProvider) {

        $locationProvider.html5Mode({

            enabled: true,

            requireBase: false

        }).hashPrefix('!');

        $routeProvider

        .when('/', { // For Home Page

            templateUrl: '/AngularTemplates/Home.html',

            controller: 'HomeController'

        })

        .when('/Home/Contact', { // For Contact page

            templateUrl: '/AngularTemplates/Contact.html',

            controller: 'ContactController'

        })

        .when('/Home/About', { // For About page

            templateUrl: '/AngularTemplates/About.html',

            controller: 'AboutController'

        })

        .when('/Home/User/:userid', { // For User page 

            templateUrl: '/AngularTemplates/User.html',

            controller: 'UserController'

        })

             .when('/Customers/CustomerInquiry', { // For CustomerInquiry Page

                 templateUrl: '/AngularTemplates/CustomerInquiry.html',

                 controller: 'customerInquiryController'

             })

        .otherwise({   // This is when any route not matched => error

            controller: 'ErrorController'

        })

    }]);

My controller js looks like:-

var app = angular.module('MyApp');

app.controller('UserController', ['$scope', '$routeParams', function ($scope, $routeParams) {

    $scope.Message = "This is User  Page with query string id value = " + $routeParams.userid;

}]);

app.controller('HomeController', function ($scope) {

    $scope.Message = "This is HOME page";

})

app.controller('AboutController', function ($scope) {

    $scope.Message = "This is ABOUT page";

})

app.controller('ContactController', function ($scope) {

    // $routeParams used for get query string value

    $scope.Message = "This is Contact Page  ";

})

app.controller('ErrorController', function ($scope) {

    $scope.Message = "404 Not Found!";

});

//app.controller('customerInquiryController', function ($scope) {

//    $scope.Message = "This is customerInquiry page";

//})

//console.log("customer inquiry");

app.controller('customerInquiryController', ['$routeParams', '$location', 'ajaxService', 'dataGridService', 'alertService',

    function ($routeParams, $location, ajaxService, dataGridService, alertService) {    

        "use strict";

        var vm = this;

        this.initializeController = function () {

            vm.title = "Customer Inquiry";

            vm.alerts = [];

            vm.closeAlert = alertService.closeAlert;

            dataGridService.initializeTableHeaders();

            dataGridService.addHeader("Customer Code", "CustomerCode");

            dataGridService.addHeader("Company Name", "CompanyName");

            dataGridService.addHeader("Contact Name", "ContactName");

            dataGridService.addHeader("City", "City");

            dataGridService.addHeader("Region", "Region");

            vm.tableHeaders = dataGridService.setTableHeaders();

            vm.defaultSort = dataGridService.setDefaultSort("Company Name");

            vm.currentPageNumber = 1;

            vm.sortExpression = "CompanyName";

            vm.sortDirection = "ASC";

            vm.pageSize = 15;

            this.executeInquiry();

        }

        this.closeAlert = function (index) {

            vm.alerts.splice(index, 1);

        };

        this.changeSorting = function (column) {

            dataGridService.changeSorting(column, vm.defaultSort, vm.tableHeaders);

            vm.defaultSort = dataGridService.getSort();

            vm.sortDirection = dataGridService.getSortDirection();

            vm.sortExpression = dataGridService.getSortExpression();

            vm.currentPageNumber = 1;

            vm.executeInquiry();

        };

        this.setSortIndicator = function (column) {

            return dataGridService.setSortIndicator(column, vm.defaultSort);

        };

        this.pageChanged = function () {

            this.executeInquiry();

        }

        this.executeInquiry = function () {

            alert('executeInquiry');

            var inquiry = vm.prepareSearch();

            ajaxService.ajaxPost(inquiry, "api/CustomerService/GetCustomers", this.getCustomersOnSuccess, this.getCustomersOnError);

        }

        this.prepareSearch = function () {

            var inquiry = new Object();

            inquiry.currentPageNumber = vm.currentPageNumber;

            inquiry.sortExpression = vm.sortExpression;

            inquiry.sortDirection = vm.sortDirection;

            inquiry.pageSize = vm.pageSize;

            return inquiry;

        }

        this.getCustomersOnSuccess = function (response) {

            vm.customers = response.customers;

            vm.totalCustomers = response.totalRows;

            vm.totalPages = response.totalPages;

        }

        this.getCustomersOnError = function (response) {

            alertService.RenderErrorMessage(response.ReturnMessage);

        }

    }]);

My html looks like:-

<div ng-controller="customerInquiryController as vm" ng-init="vm.initializeController()">
<h4 class="page-header">{{vm.title}}</h4>

<table class="table table-striped table-hover" style="width: 100%; padding:4px">
<thead>

<tr>
<th colspan="2" style="width: 50%">
<span ng-bind="vm.totalCustomers"></span>&nbsp;Customers
</th>
<th colspan="5" style="text-align: right; width: 50%">
Page&nbsp;<span ng-bind="vm.currentPageNumber"></span>&nbsp;of&nbsp;
<span ng-bind="vm.totalPages"></span>
</th>
</tr>

<tr>
<th ng:repeat="tableHeader in vm.tableHeaders" style="text-decoration:underline" ng:class="vm.setSortIndicator(tableHeader.label)" ng:click="vm.changeSorting(tableHeader.label)">{{tableHeader.label}}</th>
</tr>

</thead>
<tbody>
<tr ng-repeat="customer in vm.customers">
<td style="width: 20%; white-space: nowrap"><a ng-href="Customers/CustomerMaintenance/{{customer.customerID}}" style="cursor:pointer; text-decoration:underline; color:black">{{customer.customerCode}}</a></td>
<td style="width: 30%; white-space: nowrap"><div ng-bind="customer.companyName"></div></td>
<td style="width: 20%; white-space: nowrap"><div ng-bind="customer.contactName"></div></td>
<td style="width: 20%; white-space: nowrap"><div ng-bind="customer.city"></div></td>
<td style="width: 10%; white-space: nowrap"><div ng-bind="customer.region"></div></td>
</tr>
</tbody>
</table>

<pagination boundary-links="true" total-items="vm.totalCustomers" items-per-page="vm.pageSize" ng-change="vm.pageChanged()"
ng-model="vm.currentPageNumber" class="pagination-lg" previous-text="Prev" next-text="Next" first-text="First" last-text="Last"></pagination>

</div>
<script src="../Scripts/AngularJsControllers/AjaxService.js"></script>
<script src="../Scripts/AngularJsControllers/alertService.js"></script>
<script src="../Scripts/AngularJsControllers/DataGridService.js"></script>

I am getting the error 

Error: [ng:areq] Argument 'customerInquiryController' is not a function, got undefined

plz suggest what i am doing wrong

Answer 1

User483994611 posted

Probably the error is in this line not sure..why the controller is not getting identified..

app.controller('customerInquiryController', ['$routeParams', '$location', 'ajaxService', 'dataGridService', 'alertService',

    function ($routeParams, $location, ajaxService, dataGridService, alertService) {    

I have applied the references in the grid.html as shown below..

<script src="../Scripts/AngularJsControllers/AjaxService.js"></script>
<script src="../Scripts/AngularJsControllers/alertService.js"></script>
<script src="../Scripts/AngularJsControllers/DataGridService.js"></script>

Answer 2

User483994611 posted

I have added another tab customerInquiryController1 on  the layout on trial basis,Clicking on this link will navigate to customerInquiry1.html 

I have added customerInquiry1.cshtml  where under ng view  customerInquiry1.html will be attached

@{
ViewBag.Title = "CustomerInquiry1 Page";
}

<h2>CustomerInquiry1 Page</h2>
<div ng-controller="CustomerInquiry1">
<div ng-view></div>
</div>

My controller looks like :-

var app = angular.module('MyApp');

app.controller('customerInquiryController1', ['$routeParams', '$location', 'ajaxService', 'dataGridService', 'alertService',

function ($routeParams, $location, ajaxService, dataGridService, alertService) {
// $routeParams used for get query string value
alert('hi');
$scope.Message = "This is customerInquiry1 Page ";
}]);

The dependencies js associated with my customerInquiry1.html  are

<script src="../Scripts/AngularJsControllers/AjaxService.js"></script>
<script src="../Scripts/AngularJsControllers/alertService.js"></script>
<script src="../Scripts/AngularJsControllers/DataGridService.js"></script>
<script src="../Scripts/AngularJsControllers/angular-block-ui.js"></script>

I have attached these references with my html file where the grid html is present

probably these dependencies (AjaxService,alertService, DataGridService,angular-block-ui) are not getting associated

So I am getting the error Error:

[$injector:unpr] Unknown provider: blockUIProvider <- blockUI <- ajaxService

Error: [$injector:unpr] Unknown provider: ajaxServiceProvider <- ajaxService <- customerInquiryController1

Plz suggest what I am doing wrong

Answer 3

User61956409 posted

Hi suvo,

o I am getting the error Error:

[$injector:unpr] Unknown provider: blockUIProvider <- blockUI <- ajaxService

Error: [$injector:unpr] Unknown provider: ajaxServiceProvider <- ajaxService <- customerInquiryController1

Please share us the code of definition of ajaxServiceProvider. Besides, this sample code creating a provider is for your reference.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <script>
        var app = angular.module('myApp', []);

        app.provider("ajaxService", function () {
            this.$get = function () {
                return "My Value";
            };
        });
        
        app.controller('myCtrl', ["$scope", "ajaxService", function ($scope, ajaxService) {
            $scope.name = ajaxService;
        }]);
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div ng-app="myApp" ng-controller="myCtrl">
                {{name}}
            </div>
        </div>
    </form>
</body>
</html>

Best Regards,

Fei Han

Answer 4

User483994611 posted

All my dependency params js 'ajaxService', 'dataGridService', 'alertService' are listed below.

These are in different files.

I guess multiple dependencies are not getting attached with customerInquiryController1 not sure why its happening

I have attached these references with my cshtml file where the grid html is present

<div ng-controller="customerInquiryController as vm" ng-init="vm.initializeController()">
<div ng-view></div>
</div>
<script src="~/Views/Customers/CustomerInquiryController.js"></script>
<script src="../Scripts/AngularJsControllers/AjaxService.js"></script>
<script src="../Scripts/AngularJsControllers/alertService.js"></script>
<script src="../Scripts/AngularJsControllers/DataGridService.js"></script>
<script src="../Scripts/AngularJsControllers/angular-block-ui.js"></script>

ajax service.js:-

console.log("ajax service");

angular.module('MyApp').service('ajaxService', ['$http', 'blockUI', function ($http, blockUI) {

"use strict";

this.ajaxPost = function (data, route, successFunction, errorFunction) {

blockUI.start();

$http.post(route, data).success(function (response, status, headers, config) {
blockUI.stop();
successFunction(response, status);
}).error(function (response) {
blockUI.stop();
errorFunction(response);
});

}

}]);

alertservice.js:-

//alert("alert service");

console.log("alert service");

angular.module('MyApp').service('alertService', ['$rootScope', function ($rootScope) {

$rootScope.alerts = [];
$rootScope.messageBox = "";

var _alerts = [];
var _messageBox = "";

this.setValidationErrors = function (scope, validationErrors) {

for (var prop in validationErrors) {
var property = prop + "InputError";
scope[property] = true;
}

}

this.returnFormattedMessage = function () {
return _messageBox;
}

this.returnAlerts = function () {
return _alerts;
}

this.renderErrorMessage = function (message) {

var messageBox = formatMessage(message);

_alerts = [];
_messageBox = messageBox;
_alerts.push({ 'type': 'danger', 'msg': '' });

};

this.renderSuccessMessage = function (message) {

var messageBox = formatMessage(message);

_alerts = [];
_messageBox = messageBox;
_alerts.push({ 'type': 'success', 'msg': '' });

};

this.renderWarningMessage = function (message) {

var messageBox = formatMessage(message);

_alerts = [];
_messageBox = messageBox;
_alerts.push({ 'type': 'warning', 'msg': '' });

};

this.renderInformationalMessage = function (message) {

var messageBox = formatMessage(message);

_alerts = [];
_messageBox = messageBox;
_alerts.push({ 'type': 'info', 'msg': '' });

};

function formatMessage(message) {
var messageBox = "";
if (angular.isArray(message) == true) {
for (var i = 0; i < message.length; i++) {
messageBox = messageBox + message[i] + "<br/>";
}
}
else {
messageBox = message;
}

return messageBox;

}

}]);

data grid service.js

//alert("data grid service")
console.log("data grid service");

angular.module('MyApp').service('dataGridService', [function () {

var dataGrid = new Object();

dataGrid.tableHeaders = [];
dataGrid.sortExpression = "";
dataGrid.sortDirection = "";
dataGrid.sort = "";

this.initializeTableHeaders = function () {
dataGrid = new Object();
dataGrid.tableHeaders = [];
};

this.addHeader = function (label, expression) {
var tableHeader = new Object();
tableHeader.label = label;
tableHeader.sortExpression = expression;
dataGrid.tableHeaders.push(tableHeader);
};

this.setTableHeaders = function () {
return dataGrid.tableHeaders;
}

this.changeSorting = function (columnSelected, currentSort, tableHeaders) {

dataGrid = new Object();

dataGrid.sortExpression = "";

var sort = currentSort;
if (sort.column == columnSelected) {
sort.descending = !sort.descending;
} else {
sort.column = columnSelected;
sort.descending = false;
}

for (var i = 0; i < tableHeaders.length; i++) {
if (sort.column == tableHeaders[i].label) {
dataGrid.sortExpression = tableHeaders[i].sortExpression;
break;
}
}

if (sort.descending == true)
dataGrid.sortDirection = "DESC";
else
dataGrid.sortDirection = "ASC";

dataGrid.sort = sort;

}

this.getSort = function (columnSelected, currentSort, tableHeaders) {
return dataGrid.sort;
};

this.getSortDirection = function () {
return dataGrid.sortDirection;
};

this.getSortExpression = function () {
return dataGrid.sortExpression;
};

this.setDefaultSort = function (defaultSort) {
var sort = {
column: defaultSort,
descending: false
}
return sort;
};

this.setSortIndicator = function (column, defaultSort) {
return column == defaultSort.column && 'sort-' + defaultSort.descending;
};

}]);

Answer 5

User483994611 posted

I moved all the js 'ajaxService', 'dataGridService', 'alertService' and placed in the controller js file.I could find the grid coming up but not the pagination div.Please suggest what is going wrong:-

//console.log("customer inquiry");

//angular.module("MyApp").register.controller('customerInquiryController', ['$routeParams', '$location', 'ajaxService', 'dataGridService', 'alertService',

app.controller('CustInq', ['$routeParams', '$location', 'ajaxService', 'dataGridService', 'alertService',

function ($routeParams, $location, ajaxService, dataGridService, alertService) {
// debugger;
//alert('hi');
"use strict";

var vm = this;

this.initializeController = function () {
// debugger;
vm.title = "Customer Inquiry";

vm.alerts = [];
vm.closeAlert = alertService.closeAlert;

dataGridService.initializeTableHeaders();

dataGridService.addHeader("Customer Code", "CustomerCode");
dataGridService.addHeader("Company Name", "CompanyName");
dataGridService.addHeader("Contact Name", "ContactName");
dataGridService.addHeader("City", "City");
dataGridService.addHeader("Region", "Region");

vm.tableHeaders = dataGridService.setTableHeaders();
vm.defaultSort = dataGridService.setDefaultSort("Company Name");

vm.currentPageNumber = 1;
vm.sortExpression = "CompanyName";
vm.sortDirection = "ASC";
vm.pageSize = 15;
//debugger;
this.executeInquiry();

}

this.closeAlert = function (index) {
vm.alerts.splice(index, 1);
};

this.changeSorting = function (column) {

dataGridService.changeSorting(column, vm.defaultSort, vm.tableHeaders);

vm.defaultSort = dataGridService.getSort();
vm.sortDirection = dataGridService.getSortDirection();
vm.sortExpression = dataGridService.getSortExpression();
vm.currentPageNumber = 1;

vm.executeInquiry();

};

this.setSortIndicator = function (column) {
return dataGridService.setSortIndicator(column, vm.defaultSort);
};

this.pageChanged = function () {
this.executeInquiry();
}

this.executeInquiry = function () {
var inquiry = vm.prepareSearch();
debugger;
ajaxService.ajaxPost(inquiry, "../api/CustomerService/GetCustomers", this.getCustomersOnSuccess, this.getCustomersOnError);
// ajaxService.ajaxPost(inquiry, "../CustomerService/GetCustomers", this.getCustomersOnSuccess, this.getCustomersOnError);

//ajaxService.ajaxPost(inquiry, "api/CustomerService/GetCustomers", this.getCustomersOnSuccess, this.getCustomersOnError);

//ajaxService.ajaxPost(inquiry, "api/GetCustomers", this.getCustomersOnSuccess, this.getCustomersOnError);

}

this.prepareSearch = function () {
// debugger;
var inquiry = new Object();

inquiry.currentPageNumber = vm.currentPageNumber;
inquiry.sortExpression = vm.sortExpression;
inquiry.sortDirection = vm.sortDirection;
inquiry.pageSize = vm.pageSize;

return inquiry;

}

this.getCustomersOnSuccess = function (response) {
vm.customers = response.customers;
vm.totalCustomers = response.totalRows;
vm.totalPages = response.totalPages;
}

this.getCustomersOnError = function (response) {
alertService.RenderErrorMessage(response.ReturnMessage);
}

}]);

console.log("ajax service");

app.service('ajaxService', ['$http', function ($http) {

"use strict";

this.ajaxPost = function (data, route, successFunction, errorFunction) {
debugger;
//blockUI.start();

$http.post(route, data).success(function (response, status, headers, config) {
// blockUI.stop();
successFunction(response, status);
}).error(function (response) {
// blockUI.stop();
errorFunction(response);
});

}

}]);
//alert("data grid service")
console.log("data grid service");

app.service('dataGridService', [function () {
debugger;
var dataGrid = new Object();

dataGrid.tableHeaders = [];
dataGrid.sortExpression = "";
dataGrid.sortDirection = "";
dataGrid.sort = "";

this.initializeTableHeaders = function () {
dataGrid = new Object();
dataGrid.tableHeaders = [];
};

this.addHeader = function (label, expression) {
var tableHeader = new Object();
tableHeader.label = label;
tableHeader.sortExpression = expression;
dataGrid.tableHeaders.push(tableHeader);
};

this.setTableHeaders = function () {
return dataGrid.tableHeaders;
}

this.changeSorting = function (columnSelected, currentSort, tableHeaders) {

dataGrid = new Object();

dataGrid.sortExpression = "";

var sort = currentSort;
if (sort.column == columnSelected) {
sort.descending = !sort.descending;
} else {
sort.column = columnSelected;
sort.descending = false;
}

for (var i = 0; i < tableHeaders.length; i++) {
if (sort.column == tableHeaders[i].label) {
dataGrid.sortExpression = tableHeaders[i].sortExpression;
break;
}
}

if (sort.descending == true)
dataGrid.sortDirection = "DESC";
else
dataGrid.sortDirection = "ASC";

dataGrid.sort = sort;

}

this.getSort = function (columnSelected, currentSort, tableHeaders) {
return dataGrid.sort;
};

this.getSortDirection = function () {
return dataGrid.sortDirection;
};

this.getSortExpression = function () {
return dataGrid.sortExpression;
};

this.setDefaultSort = function (defaultSort) {
var sort = {
column: defaultSort,
descending: false
}
return sort;
};

this.setSortIndicator = function (column, defaultSort) {
return column == defaultSort.column && 'sort-' + defaultSort.descending;
};

}]);

//alert("alert service");

console.log("alert service");

app.service('alertService', ['$rootScope', function ($rootScope) {
//debugger;
$rootScope.alerts = [];
$rootScope.messageBox = "";

var _alerts = [];
var _messageBox = "";

this.setValidationErrors = function (scope, validationErrors) {

for (var prop in validationErrors) {
var property = prop + "InputError";
scope[property] = true;
}

}

this.returnFormattedMessage = function () {
return _messageBox;
}

this.returnAlerts = function () {
return _alerts;
}

this.renderErrorMessage = function (message) {

var messageBox = formatMessage(message);

_alerts = [];
_messageBox = messageBox;
_alerts.push({ 'type': 'danger', 'msg': '' });

};

this.renderSuccessMessage = function (message) {

var messageBox = formatMessage(message);

_alerts = [];
_messageBox = messageBox;
_alerts.push({ 'type': 'success', 'msg': '' });

};

this.renderWarningMessage = function (message) {

var messageBox = formatMessage(message);

_alerts = [];
_messageBox = messageBox;
_alerts.push({ 'type': 'warning', 'msg': '' });

};

this.renderInformationalMessage = function (message) {

var messageBox = formatMessage(message);

_alerts = [];
_messageBox = messageBox;
_alerts.push({ 'type': 'info', 'msg': '' });

};

function formatMessage(message) {
var messageBox = "";
if (angular.isArray(message) == true) {
for (var i = 0; i < message.length; i++) {
messageBox = messageBox + message[i] + "<br/>";
}
}
else {
messageBox = message;
}

return messageBox;

}

}]);

Answer 6

User483994611 posted

for demo trial basis i made ajax scrpt1.js and ajaxscrpt2.js 2 seperate js files  

app.service("ajaxService1", function () {
this.GetValue = function () {
return "ajaxService1";
};

});

app.service("ajaxService2", function () {
this.GetValue2 = function () {
return "ajaxService2";
};

});

when i tried to reference ajaxscript1. js and ajaxscripts2.js like :-

app.controller('ContactController', ["$scope", "ajaxService1", "ajaxService2", function ($scope, ajaxService1, ajaxService2) {
//alert(ajaxService1);
//alert(ajaxService2);
var getData = ajaxService1.GetValue();
alert(getData);
var getData2 = ajaxService2.GetValue2();
alert(getData2);
$scope.Message = getData;
}]);

it gave me [$injector:unpr] Unknown provider ajaxscript1

But if i move theses code into a single file where the controller is kept it worked well as in my grid loading scenario

Plz suggest what is going wrong .Cant i reference the dependencies from separate js files