错误：尝试在单独的文件中定义控制器时出现错误：ng:areq 错误参数

Question

我的应用运行良好，但我有一个庞大的 app.js，因此为了模块化，我将控制器放入单独的文件中，并以更传统的方式设置我的应用。现在我得到了上面的错误：'Argument'prodPageCtrl' is not a'。这是我的 prodPageCtrl

"use strict";
angular.module("app.products").controller('prodPageCtrl', function($scope, $http) {
//grid def / config
$scope.gridOptions = {
    enableFiltering: true,
    columnDefs : [
        {
            field: 'productId',
            name: 'View Product',
            cellTemplate: '<div class="ui-grid-cell-contents"><a data-ui-sref="app.products.readProductPage({productId: row.entity.productId})"><i class="fa fa-eye"></i> </a>'
        },
        {
            field: 'productId',
            name: 'Edit Product',
            cellTemplate: '<div class="ui-grid-cell-contents"><a data-ui-sref="app.products.editProductPage({productId: row.entity.productId})"><i class="fa fa-pencil-square-o"></i></a>' +
            '</div>',
        },
        {
            field: 'name'
        },
        {
            field: "upc"
        },
        {
            field: 'sku'
        },
        {
            field: 'mpn'
        },
        {
            field: 'productQty'
        },
        {
            field: 'unitOfMeasure'
        },
        {
            field: 'price'
        },
        {
            field: 'attribs'
        },
        {
            field: 'descript'
        }
    ]
};
//end grid options

$http.get("api/products")
    .then(function(response) {
        $scope.productArray = response.data;
        console.log(response.data);

        //parse JSON attributes string to objects TODO fix this by make attribute formatting better.
        for(var lcv = 0; lcv < $scope.productArray.length; lcv++) {
            $scope.productArray[lcv].attribs = JSON.parse($scope.productArray[lcv].attribs);
        }

        $scope.gridOptions.data = $scope.productArray; //put data into ui-grid

    });

});`

这是我在 app.js 中的配置：

angular.module('app.products', ['ui.router']);
angular.module('app.products').config(function ($stateProvider) {
$stateProvider
    .state('app.products', {
        abstract: true,
        data: {
            title: 'Products'
        }
    })
    .state('app.products.productPage', {
        url: '/products',
        data: {
            title: 'Products Page'
        },
        views: {
            "content@app": {
                templateUrl: 'products/views/products.html',
                controller: 'prodPageCtrl'
            }
        }

    })
    .state('app.products.addProductPage', {
        url: '/products/add',
        data: {
            title: 'Add a Product'
        },
        views: {
            "content@app": {
                templateUrl: 'app/app-views/views/AddProducts.html',
                controller: 'AddProdCntrl'
            }
        }
    })
    .state('app.products.readProductPage', {
        url: '/products/:productId',
        data: {
            title: 'View a Product'
        },
        views: {
            "content@app": {
                templateUrl: 'app/app-views/views/AddProducts.html',
                controller: 'readProdCntrl'
            }
        }
    })
    .state('app.products.editProductPage', {
        url: '/products/edit/:productId',
        data: {
            title: 'Edit a Product'
        },
        views: {
            "content@app": {
                templateUrl: 'app/app-views/views/AddProducts.html',
                controller: 'editProdCntrl'
            }
        }
    })
});

最后有没有办法将我的模块的 .config 移动到其他文件，甚至是整个模块声明中？从而进一步模块化。如果您知道我可以在哪里了解更多信息，请告诉我！谢谢

Answer 1

通过使用 GULP 将我的所有 js 连接到构建文件夹中修复