Question

我正在尝试使用AngularJS和用VB.NET编写的Web API（为我的实习做这个）。

我定义了我的angularApp，对我的控制器和工厂也一样。我也在使用Angular的路由，这非常有效。我正在处理的问题是我的工厂没有激活或无法正常工作。

请查看以下代码：

我的AngularApp.js

var angularApp = angular.module('AngularApp', ['ngRoute']);
    angularApp.config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider
        .when('/ExpenseOverview', {
            controller: 'ExpenseController',
            templateUrl: 'Views/ExpenseOverview.aspx'
        })
        .when('/AddExpense',
         {
             controller: 'ExpenseController',
             templateUrl: 'Views/AddExpense.aspx'
         })
        .otherwise({ redirectTo: '/ExpenseOverview' });
    }]);

My ExpenseController：

angular.module("AngularApp").controller("ExpenseController", ["$scope", "ExpenseFactory", function ($scope, ExpenseFactory) {
    //variabelen
    $scope.expenses = [];
    $scope.id = 0;
    $scope.date = "";
    $scope.type = "";
    $scope.title = "";
    $scope.project = "";
    $scope.status = "";
    $scope.img = "";

    var shown = false;
    var dataURL = "";

    ExpenseFactory.getList($scope);
}]);

到目前为止，除了通过Web API从数据库中检索数据列表之外，我的控制器做得还不多。

我的ExpenseFactory.js

angular.module("AngularApp").factory("ExpenseFactory", ["$http", function ($http) {
    alert("test factory");
    var factory = {};

    //lijst van expenses ophalen
    factory.getList = function ($scope) {
        $http.post("/api/Expense/List")
            .success(function(data) {
                if (data === undefined || data == "") {
                    data = [];
                }

                $scope.expenses = data;
                $scope.id = $scope.expenses[$scope.expenses.length - 1].Id + 1;
            })
            .error(function() {
                alert("Er is een fout opgetreden");
            });
    };

    factory.saveList = function(expenseList) {
        $http.post("/api/Expense/SaveList", { 'expenses': expenseList })
            .success(function() {
                alert("Expenses have been saved succesfully!");
            })
            .error(function() {
                alert("Something went wrong while saving the expenses");
            });
    };
    return factory;  
}]);

正如您所看到的，我已将警报作为工厂中的第一行代码。此警报甚至没有弹出，这意味着工厂没有激活/工作。

此代码中有什么失败？

修改我将我的代码更新到当前版本，其中包含可能干扰代码的所有注释。我可以确认这些都不起作用，所以错误发生在其他地方。

另一个注意事项：我正在使用Visual Studio 2012，如果这可能与它有关，请详细说明我如何解决这个恶作剧。

Answer 1

您错过了从工厂方法返回$http承诺

factory.getList = function ($scope) {
    return $http.post("/api/Expense/List")
        .success(function(data) {
            if (data === undefined || data == "") {
                data = [];
            }

            $scope.expenses = data;
            $scope.id = $scope.expenses[$scope.expenses.length - 1].Id + 1;
        })
        .error(function() {
            alert("Er is een fout opgetreden");
        });
};

factory.saveList = function(expenseList) {
    return $http.post("/api/Expense/SaveList", { 'expenses': expenseList })
        .success(function() {
            alert("Expenses have been saved succesfully!");
        })
        .error(function() {
            alert("Something went wrong while saving the expenses");
        });
};

您应该创建一个类似$scope.model = {}的模型对象，而不是传递整个范围，并保留ng-model（范围变量）的全部值，不要将整个范围传递给工厂，Pass只有相关的服务方法数据。

Answer 2

由于应用程序，控制器和工厂位于不同的文件中，最好避免使用angularApp引用模块。

而是使用以下语法：

angular.module('AngularApp').factory("ExpenseFactory", ["$http", function ($http) {

下面，

angular.module('AngularApp')

意味着你正在获得该模块。

如果你要使用var angularApp，你实际上是用你的变量名来污染全局命名空间。

另外，如果偶然在某些其他库代码中，有人将其重新分配给其他内容，那么整个应用程序将会中断。

例如：

in another file, `angularApp = alert;`

还有一件事，

在您的控制器中：

angularApp.controller("ExpenseController", ["$scope", "ExpenseFactory", function ($scope, expenseFactory) {

您在expenseFactory中输入错误，因为它必须是ExpenseFactory

angularApp.controller("ExpenseController", ["$scope", "ExpenseFactory", function ($scope, ExpenseFactory) {

Answer 3

感谢@mohamedrias帮助我找到解决方案。确实是因为URL路径无效。由于无法加载的视图，工厂正在崩溃。我不知道这是怎么发生的，但现在已经解决了！所有代码都是正确的，除了对我的视图的无效URL路径的引用。

感谢所有的帮助和评论，我会为项目的即将到来的部分保留一切。

StackOverflow太棒了！

AngularJS - 工厂无法工作/激活

3 个答案: