从AngularJS的另一个文件中的控制器访问服务

我有一个使用Onsen UI和AngularJS构建的跨平台企业应用程序。从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 
});

不同的.js文件，然后在的index.html声明，这一切似乎是工作确定。

我试图在其自己的文件中创建服务sharedPropertiessharedProperties.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; 
     } 
    } 
});

我已经尝试将sharedProperties添加到我的模块，但都没有工作。我试图将它添加到下面我主要的应用程序：

// Create the module that deals with the controllers 
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从新文件可用于所有我的控制器？

另外，我该如何调用我的getter和setter。当所有的控制器和服务都在我原来的app.js文件中时，我将创建控制器，将sharedProperties添加到函数（），然后调用我的getter和setter例如

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

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

来源

2016-05-12 heyred

您必须将模块'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 
}]);

这如果你打算缩小或丑化你的代码，那就是为了你。

来源

2016-05-12 14:38:10 mwild

从AngularJS的另一个文件中的控制器访问服务

回答

相关问题