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) {