AngularJS Service nicht als Singleton

Question

Entschuldigung für den Code schweren Post, aber ich wollte so viel Kontext wie möglich bieten. Ich habe ein Problem bei der Definition eines Dienstes in meiner Angular.js-Anwendung. Dienste sollen als Singletons in einer Anwendung (source) fungieren, so dass ich sehr verwirrt bin, das folgende Verhalten zu erhalten.

In meinem app.js Datei, betreibe ich meine AmplitudeService Dienst und console.log (AmplitudeService). Dies gibt ein Objekt mit allen Methoden aus, die ich in meiner AmplitudeService.js-Datei definiert habe. Daher kann ich den Service ordnungsgemäß verwenden und Ereignisse protokollieren wie erwartet.

Wenn ich jedoch console.log (AmplitudeService) innerhalb meiner header.js, gibt es mein Window-Objekt aus. Daher enthält das Fenster keine Funktionen wie "logEvent", "identifyUser" usw., so dass AmplitudeService in diesem Fall nicht verwendbar ist.

Ich würde jede und jede Einsicht zu schätzen wissen!

AmplitudeService.js (source)

Hinweis: Wenn Sie die Syntax des Autors überprüfen, er gibt ein Objekt am Ende seines Dienstes. In meiner Forschung habe ich gelesen, das Schlüsselwort "this" zu verwenden, wenn ich Service-Funktionen definiere (source), und dass Sie kein Objekt wie bei einer Factory zurückgeben müssen, also habe ich es entsprechend aktualisiert.

angular.module('AmplitudeService', []) 
.service('AmplitudeService', 
['$amplitude', '$rootScope', 'amplitudeApiKey', '$location', 
function ($amplitude, $rootScope, amplitudeApiKey, $location) { 

    this.init = function() { 
    $amplitude.init(amplitudeApiKey, null); 
    $amplitude.logEvent('LAUNCHED_SITE', {page: $location.$$path}); 
    } 

    this.identifyUser = function(userId, userProperties) { 
    $amplitude.setUserId(userId); 
    $amplitude.setUserProperties(userProperties); 
    } 

    this.logEvent = function(eventName, params) { 
    $amplitude.logEvent(eventName, params); 
    } 
}]); 

Winkel amplitude.js (source)

Dies ermöglicht den Zugriff auf "$ Amplitude" in der gesamten Anwendung

(function(){ 
var module = angular.module('angular-amplitude', ['ng']); 

module.provider('$amplitude', [function $amplitudeProvider() { 
    this.$get = ['$window', function($window) { 
     (function(e,t){ 
     var r = e.amplitude || {}; 
     var n = t.createElement("script"); 
     n.type = "text/javascript"; 
     n.async = true; 
     n.src = "https://d24n15hnbwhuhn.buttfront.net/libs/amplitude-2.2.0-min.gz.js"; 
     var s = t.getElementsByTagName("script")[0]; 
     s.parentNode.insertBefore(n,s); 
     r._q = []; 

     function a(e){ 
     r[e] = function(){ 
      r._q.push([e].concat(Array.prototype.slice.call(arguments,0))); 
     } 
     } 
     var i = ["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","setGlobalUserProperties"]; 
     for(var o = 0; o < i.length; o++){ 
     a(i[o]) 
     } 
     e.amplitude = r 
    } 
    )(window,document); 
     return $window.amplitude; 
    }]; 
}]); 
return module; 
}()); 

App.js

angular.module('app', [ 
'ngRoute', 
'angular-amplitude', 
'AmplitudeService', 
]) 

.run(['AmplitudeService', function(AmplitudeService){ 
console.log(AmplitudeService); // Outputs 'Object {}' 
AmplitudeService.init(); 
AmplitudeService.logEvent('LAUNCHED_SITE'); 
console.log(AmplitudeService); // Outputs 'Object {}' 
}]) 

Header.js

angular.module('app.common.header', []) 
.controller('HeaderCtrl', [ '$rootScope', '$scope', '$location', '$scope', '$route', '$window', 'AmplitudeService', function($rootScope, $scope, $location, $route, $window, AmplitudeService){ 

$scope.goToSearch = function(term) { 
$location.path('/search/' + term); 
console.log(AmplitudeService); // Outputs 'Window {}' 
}; 
}]); 

Answer 1

Sieht aus wie Sie $scope in Ihrem Controller injizieren, das Unerwartete Zuordnung der variablen

verursacht

angular.module('app.common.header', []) 
.controller('HeaderCtrl', [ '$rootScope', '$scope', '$location', **'$scope'**, '$route', '$window', 'AmplitudeService', function($rootScope, $scope, $location, $route, $window, AmplitudeService){ 

$scope.goToSearch = function(term) { 
$location.path('/search/' + term); 
console.log(AmplitudeService); // Outputs 'Window {}' 
}; 
}]); 

als Nebenbei bemerkt, wenn dieses Format viel einfacher finden/Arbeit zu lesen mit bei der Definition von Controllern

angular 
    .module('app.common.header', []) 
    .controller('HeaderCtrl', headerController); 

headerController.$inject = [ '$rootScope', '$scope', '$location', '$route', '$window', 'AmplitudeService'] 

function headerController($rootScope, $scope, $location, $route, $window, AmplitudeService){ 
    $scope.goToSearch = function(term) { 
    $location.path('/search/' + term); 
    console.log(AmplitudeService); // Outputs 'Window {}' 
    }; 
}