從 AngularJS 中另一個文件中的控制器訪問服務

Question

我有一個使用 Onsen UI 和 AngularJS 構建的跨平台企業應用程序。

該應用程序發展迅速，因此我決定將我的主app.js文件拆分為單獨的文件。 到目前為止，每個頁面都有自己的控制器，所有控制器都在一個app.js文件中。

我還在app.js中定義了一個服務，我在其中存儲用戶名等值，以便在控制器之間共享。 我需要在應用程序周期期間存儲這些，因為在用戶交互結束時將所有頁面上輸入的所有值發送到服務器。

我已經成功地將控制器拆分為單獨的文件，但是我很難將服務移動到它自己的文件中，例如 sharedProperties.js。

我的“新” app.js （縮寫）如下所示：

// Create the module that deals with the controllers
var app = angular.module("myApp", ['onsen', 'loginController', 'registerController']);

然后我在自己的文件中創建每個控制器，例如login.js ，如下所示：

// Get the main app.js module
var login = angular.module("loginController", []);
login.controller("LoginController", function($scope, $http)
{
    // Need to get and set values from/to sharedProperties here
});

然后在index.html 中聲明不同的 .js 文件，所有這些似乎都可以正常工作。

我試圖以與下面相同的方式在它自己的文件（例如sharedProperties.js）中創建服務sharedProperties ，但這不起作用。

// Get the main app.js module
var shared = angular.module("sharedProperties", []);
shared.service("SharedProperties", function()
{
    var username = "";   

    return {
        // Get and set the userName
        getUserName: function()
        {
            return userName;
        },
        setUserName: function(value)
        {
            userName = value;
        }
    }
});

我曾嘗試將 sharedProperties 添加到我的模塊中，但都沒有奏效。 我嘗試將其添加到我的主應用程序中，如下所示：

// Create the module that deals with the controllers
var app = angular.module("myApp", ['onsen', 'sharedProperties', 'loginController', 'registerController']);

以及各個控制器的 function() ：

var login = angular.module("loginController", []);
login.controller("LoginController", function($scope, $http, sharedProperties)
{
    // Need to get and set values from/to sharedProperties here
});

但這些都不起作用。 如何使我的所有控制器都可以使用新文件中的sharedProperties ？

另外，我如何調用我的 getter 和 setter。 當所有控制器和服務都在我原來的app.js文件中時，我會創建控制器，將 sharedProperties 添加到 function() 然后調用我的 getter 和 setter 例如

app.controller("LoginController", function($scope, $http, sharedProperties)
{
    sharedProperties.setUserName(someValue);
    sharedProperties.getUserName();
});

或者有沒有更好的方法來做到這一點？ 正如我所提到的，我必須將 app.js 文件拆分為單獨的文件，因為應用程序變得越來越大並且越來越難以管理。 由於我無法控制的原因，該應用程序會隨着時間的推移變得更大。

Answer 1

您必須將模塊“sharedProperties”注入您要使用它的模塊中。

通過這樣做，它使模塊知道“sharedProperties”中的所有內容。 因此，不是將“sharedProperties”注入控制器和其他服務，而是需要注入實際的服務。 像這樣：

    var app = angular.module("myApp", ['onsen', 'sharedProperties', 'loginController', 'registerController']);


    var login = angular.module("loginController", []);
    login.controller("LoginController", function($scope, $http, SharedProperties)
    {
    // Need to get and set values from/to sharedProperties here
    });

然后從那里，調用您綁定到該服務的任何函數就像

SharedProperties.someFunction();
SharedProperties.someOtherFunction();

另一個注意事項：我建議長手注射

login.controller("loginController", ['$scope','$http', 'SharedProperties', function($scope, $http, SharedProperties){
    //code in here
}]);

這是為了您是否打算縮小或丑化您的代碼。