Argument 'ProductListCtrl' is not a function, got undefined

ghost commented 9 years ago

I've tried creating the app twice now and keep getting stuck tying to call the WebAPI. It isn't a CORS error. Instead I'm receiving the following error:

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

Angular points to this link for details about the error: https://docs.angularjs.org/error/$injector/unpr?p0=productResourceProvider

Looking at Chrome Network, it doesn't look like it is even calling WebAPI:

Could you point me in the right direction to resolve? Thanks.

Josh.

DeborahK commented 9 years ago

This is almost always one of the following:

The Script tag is missing from the index.html file.
The reference to the module is missing (or misspelled) from the app.js file
The reference to the dependency is missing (or misspelled) from the controller

NOTE: Casing is critical. If the code defines myService, the dependency must say "myService" not "MyService".

Hope this helps!

ghost commented 9 years ago

I must be missing it

Index.html

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Acme Product Management</title>

        <!-- Style sheets -->
        <link href="Content/bootstrap.css" rel="stylesheet" />
    </head>

    <body ng-app="productManagement">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <div class="navbar-brand">Acme Product Management</div>
                </div>
            </div>
        </nav>

        <div class="container">
            <div ng-include="'app/products/productListView.html'"></div>
        </div>

        <!-- Library Scripts -->
        <script src="scripts/angular.js"></script>
        <script src="Scripts/angular-resource.js"></script>

        <!-- Application Script -->
        <script src="app/app.js"></script>

        <!-- Services -->
        <script src="common/common.services.js"></script>
        <script src="common/productResource.js"></script>

        <!-- Product Controllers -->
        <script src="app/products/productListCtrl.js"></script>
    </body>
    </html>

app.js:

    (function () {
        "use strict";

        var app = angular.module("productManagement", ["common.services"]);
    }());

productListCtrl.js

    (function () {
        "use strict";
        angular
            .module("productManagement")
            .controller("productListCtrl", ["productResource", ProductListCtrl]);

        function ProductListCtrl(productResource) {
            var vm = this;

            productResource.query(function (data) {
                vm.products = data;
            });
        }
    }());

productResource.js

(function () {
    "use strict";

    angular
        .module("common.services")
        .factory("productResource", ["$resource", "appSettings", productResource])

    function productResource($resource, appSettings) {
        return $resource(appSettings.serverPath + "/api/products/:id");
    }
});

DeborahK commented 9 years ago

.controller("productListCtrl", ["productResource", ProductListCtrl]); .................. ^ This needs to be a capital "P"

ghost commented 9 years ago

That solved it, thank you for the quick response. I'm missing my compiled languages right now!

Best,

Josh.

DeborahK commented 9 years ago

Glad that solved it!

usman10scorpio commented 7 years ago

@DeborahK thanks for the case sensitive tip :)

DeborahK / AngularF2BWebAPI

Argument 'ProductListCtrl' is not a function, got undefined #6