why I get error: http.get is not a function

Question

I have this code:

(function () {
    "use strict";

    angular.module("workPlan").controller("workPlanListController", ["workPlans",
                                                                    "clients",
                                                                    "inspectionAuthority",
                                                                    "$http",
                                                                    "config",
                                                                    "workPlanServise",
                                                                    workPlanListController]);
    function workPlanListController(workPlans,
                                    clients,
                                    inspectionAuthority,
                                    workPlanServise,
                                    config,
                                    $http) {
        var self = this;

        this.workPlanList = workPlans;
        this.lookups = {
            client: clients,
            authority: inspectionAuthority
        };

        this.gridOptions = {
            expandableRowTemplate: 'app/workPlan/templates/expandableRowTemplate.tmpl.html',
            expandableRowHeight: 150,
            enableColumnMenus: false,
            enableSorting: true,
            enableFiltering: false,
            enableToopTip: true,
            enableHorizontalScrollbar: 0,
            onRegisterApi: function (gridApi) {
                gridApi.expandable.on.rowExpandedStateChanged(null, function (row) {


                    if (row.isExpanded) {
                        row.entity.subGridOptions = {

                            columnDefs: [{ name: 'Authority', field: 'authName', cellTooltip: true },
                                         { name: '# Items, field: 'items2inspect', cellTooltip: true },
                                         { name: '% Inspected, field: 'percentage', cellTooltip: true }]
                        };

                            $http.get(config.baseUrl + "api/workPlan/").success(function (result) {
                                row.entity.subGridOptions.data = result.data;
                            });

                    }
                });
            }
        }
        this.gridOptions.columnDefs = [
{ name: 'client, field: 'clientName', cellTooltip: true, headerTooltip: true },
{ name: 'sites', field: 'siteNumbers', cellTooltip: true, headerTooltip: true },
{ name: 'checkedSites', field: 'siteNumbersInspected', cellTooltip: true, headerTooltip: true }];

        this.gridOptions.data = self.workPlanList;
    }
})();

When I try expand row I get on this row:

$http.get

Error : $http.get in not a function.

Any idea why I get error?

Answer 1

You shouldn't change the dependency sequence while using dependencies in the controller function.

Code

angular.module("workPlan").controller("workPlanListController", ["workPlans",
    "clients",
    "inspectionAuthority",
    "$http",
    "config",
    "workPlanServise",
    workPlanListController
]);

function workPlanListController(workPlans,
    clients,
    inspectionAuthority,
    $http, //<-- $http should be here, instead of placing it at the end.
    config,
    workPlanServise
) {

Same SO Answer here