從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的另一個文件中的控制器訪問服務

回答

相關問題