Javascript AngularJS-工厂不工作/激活

我正在尝试使用AngularJS和用VB.NET编写的Web API来完成我的实习

我定义了angularApp，控制器和工厂也是如此。 我也在从角度进行布线，这非常有效。 我正在处理的问题是，我的工厂没有激活或不工作

请看下面的代码：

我的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' });
    }]);

我的费用控制员：

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);
}]);

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

到目前为止，我的控制器除了通过web API从数据库检索数据列表外，没有做更多的事情

My 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，如果这可能与此有关，请详细说明如何修复此shenannigans。

您错过了从factory methods返回$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模型范围变量的所有值。不要将整个范围传递给工厂，只将相关数据传递给服务方法。

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

而是使用以下语法：

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

这里,

意味着你得到了模块

如果您打算使用var angularApp，那么实际上您正在用变量名污染全局名称空间

另外，如果在其他库代码中，有人将其重新分配给其他库代码，那么整个应用程序都将崩溃

例如：

in another file, `angularApp = alert;`

还有一件事

在控制器中：

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);
}]);

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

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

---

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

感谢所有的帮助和意见，我会记住我的项目即将到来的部分的一切

---

StackOverflow太棒了

是因为费用吗？工厂是否区分大小写。不确定您必须在其他文件中使用AngularApp模块来引用module@mohamedrias为什么它是必需的，我想他已经声明了全局变量。是的，它不是必需的。但避免污染全局名称空间是一个很好的做法。但真正的错误在控制器代码中。OP在引用expenseFactory时有一个输入错误，它已更改为angular.moduleAngularApp，并且expenseFactory将恢复为expenseFactory。但是代码执行时仍然没有区别。仍然不工作。工厂中的第一行代码甚至没有执行。我试过你的代码，用你给我的语法替换了所有angularApp变量。但它根本没有任何效果：/你试过我最新更新的吗？您的控制器声明部分有一个输入错误我们在函数中使用的ExpenseFactory对象不区分大小写是的，我更改了它，但仍然没有运气。它什么也没做。它找不到您在templateUrl中提到的视图。确保URL路径正确OP正在询问，工厂的第一个语句是alerttest factory它更多地与控制器代码有关，而不是与工厂有关。返回承诺根本没有帮助，因为我工厂中的第一行代码也没有执行。我不知道工厂被执行时发生了什么，但我知道的是，我工厂里的一切都没有被执行，除了我可能已经忘记的返回。