AngularJS - Factory not working/activating

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

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

Answer 1

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

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

StackOverflow真棒！

Answer 2

你错过了返回从工厂方法$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（范围变量）的所有值不将全范围传递给工厂，只将相关数据传递给服务方法。

Answer 3

由于应用程序，控制器和工厂在不同的文件中，最好避免使用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) {