Argument 'ProductListCtrl' is not a function, got undefined

Eslam-Elsawy commented 8 years ago

I need some help in this:

I followed the same instructions in module 3 and I am getting this error: Error: [ng:areq] Argument 'ProductListCtrl' is not a function, got undefined

capture

here is my index.html

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>Acm Product Management</title>

    <!-- Style sheets -->
    <link href="styles/bootstrap.css" rel="stylesheet" />
    <link rel="shortcut icon" href="">
</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>
    <script src="scripts/angular-mocks.js"></script>
    <script src="scripts/angular-route.js"></script>

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

    <!-- Domain Classes -->

    <!-- Services -->

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

</html>

productListCtrl.js

var ProductListCtrl = (function () {
    function ProductListCtrl() {
        this.title = "product list";
        this.showImage = false;
        this.products = [
            {
                "productId": 1,
                "productName": "Leaf Rake",
                "productCode": "GDN-0011",
                "releaseDate": new Date(2009, 2, 19),
                "description": "Leaf rake with 48-inch wooden handle.",
                "price": 19.95,
                "imageUrl": "http://openclipart.org/image/300px/svg_to_png/26215/Anonymous_Leaf_Rake.png"
            },
            {
                "productId": 2,
                "productName": "Garden Cart",
                "productCode": "GDN-0023",
                "releaseDate": new Date(2010, 2, 18),
                "description": "15 gallon capacity rolling garden cart",
                "price": 32.99,
                "imageUrl": "http://openclipart.org/image/300px/svg_to_png/58471/garden_cart.png"
            },
            {
                "productId": 5,
                "productName": "Hammer",
                "productCode": "TBX-0048",
                "releaseDate": new Date(2013, 4, 21),
                "description": "Curved claw steel hammer",
                "price": 8.99,
                "imageUrl": "http://openclipart.org/image/300px/svg_to_png/73/rejon_Hammer.png"
            }
        ];
    }
    return ProductListCtrl;
})();
angular.module("productManagement").controller("ProductListCtrl", ProductListCtrl);

app.js

angular.module("productManagement", []);

productListView.html

<div class="panel panel-primary"
     ng-controller="ProductListCtrl as vm">
    <div class="panel-heading"
         style="font-size:large">{{::vm.title}}
    </div>

    <div class="panel-body">
        <table class="table">

            <thead>
            <tr>
                <td>
                    <button type="button"
                            class="btn btn-primary"
                            ng-click="vm.toggleImage()">
                        {{vm.showImage ? "Hide" : "Show"}} Image
                    </button>
                </td>
                <td>Product</td>
                <td>Code</td>
                <td>Available</td>
                <td>Price</td>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="product in vm.products">
                <td>
                    <img ng-if="vm.showImage"
                         ng-src="{{product.imageUrl}}"
                         style="width:50px;margin:2px"
                         title="{{product.productName}}">
                </td>
                <td>{{ product.productName}} </td>
                <td>{{ product.productCode }}</td>
                <td>{{ product.releaseDate | date }}</td>
                <td>{{ product.price | currency }}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

I can't figure out what's wrong, any help ?

Eslam-Elsawy commented 8 years ago

I found the problem, in index.html I should have used:

<script src="app/products/productListCtrl.js"></script>

instead of

<script src="app/products/productListCtrl.js" />

DeborahK commented 8 years ago

Glad you found the problem!

DeborahK / AngularF2BWebAPI

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