javascript - 从 AngularJS 中另一个文件中的 Controller 访问服务

Question

我有一个使用 Onsen UI 和 AngularJS 构建的跨平台企业应用程序。

该应用程序发展很快，因此我决定将我的主 app.js 文件拆分为单独的文件。到目前为止，每个页面都有自己的 Controller ，并且所有 Controller 都位于一个 app.js 文件中。

我还在我的 app.js 中定义了一个服务，我在其中存储用户名等值以在 Controller 之间共享。我需要在应用程序周期期间存储这些内容，因为在所有页面上输入的所有值都会在用户交互结束时发送到服务器。

我已成功将 Controller 拆分为单独的文件，但我很难将服务移动到其自己的文件中，例如共享属性.js。

我的"new"app.js(缩写)如下所示:

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

然后我在自己的文件中创建每个 Controller ，例如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 sharedProperties.js 以与下面相同的方式，但这不起作用。

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

我尝试将共享属性添加到我的模块中，但都不起作用。我尝试将其添加到我的主应用程序中，如下所示:

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

以及各个 Controller 的 function():

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

但是这些都不起作用。如何使新文件中的共享属性可供所有 Controller 使用？

另外，我该如何调用我的 getter 和 setter？当所有 Controller 和服务都在我的原始 app.js 文件中时，我将创建 Controller ，将共享属性添加到 function() 中，然后调用我的 getter 和 setter，例如

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

或者有更好的方法吗？正如我提到的，我必须将 app.js 文件拆分为单独的文件，因为应用程序变得非常大并且变得难以管理。由于我无法控制的原因，该应用程序会随着时间的推移变得越来越大。

Answer 1

您必须将模块“sharedProperties”注入(inject)到您要使用它的模块中。

通过这样做，模块可以了解“sharedProperties”内的所有内容。因此，您需要注入(inject)实际的服务，而不是将“sharedProperties”注入(inject) Controller 和其他服务。像这样:

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

然后从那里，调用您绑定(bind)到该服务的任何函数就像

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

另一个注意事项:我建议长手注入(inject)

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

这适用于您想要缩小或丑化代码的情况。