Доступ к службе от контроллера в другом файле в 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 
}); 

Различные .js файлы затем объявлены в index.html и все это, кажется, работает нормально.

Я попытался создать службу 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; 
     } 
    } 
}); 

Я попытался добавить 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 из нового файла доступным для всех моих контроллеров?

Кроме того, как я могу назвать своих получателей и сеттеров. Когда все контроллеры и службы были в моем исходном файле app.js, я бы создал контроллер, добавил sharedProperties к функции(), а затем позвонил своим получателем и сеттерам, например.

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

Этот для вас, если вы когда-либо собираетесь минимизировать или угадать свой код.