AngularJS 服务不作为单例
AngularJS Service not acting as Singleton
对代码繁重表示歉意post,但我想提供尽可能多的上下文。我在 Angular.js 应用程序中定义服务时遇到问题。服务应该在整个应用程序中充当单例 (source),所以我很困惑会出现以下行为。
在我的 app.js 文件中,我 运行 我的 AmplitudeService 服务和 console.log(振幅服务)。这将输出一个对象,其中包含我在 AmplitudeService.js 文件中定义的所有方法。因此,我能够按预期正确使用服务和日志事件。
但是,当我在 header.js 中 console.log(AmplitudeService) 时,它会输出我的 Window 对象。因此,Window 不包含 "logEvent"、"identifyUser" 等函数,因此 AmplitudeService 在这种情况下不可用。
感谢任何和所有见解!
AmplitudeService.js (source)
注意:如果您检查作者的语法,他 return 在他的服务结束时是一个对象。在我的研究中,我读到在定义服务函数(source)时使用 "this" 关键字,并且您不需要像使用工厂那样 return 一个对象, 所以我相应地更新了它。
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);
}
}]);
angular-amplitude.js (source)
这允许在整个应用程序中访问“$amplitude”
(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 {}'
};
}]);
看起来您正在向您的控制器中注入 $scope
,导致意外映射变量
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 {}'
};
}]);
顺便说一句,如果在定义控制器时发现这种格式更容易阅读/使用
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 {}'
};
}
对代码繁重表示歉意post,但我想提供尽可能多的上下文。我在 Angular.js 应用程序中定义服务时遇到问题。服务应该在整个应用程序中充当单例 (source),所以我很困惑会出现以下行为。
在我的 app.js 文件中,我 运行 我的 AmplitudeService 服务和 console.log(振幅服务)。这将输出一个对象,其中包含我在 AmplitudeService.js 文件中定义的所有方法。因此,我能够按预期正确使用服务和日志事件。
但是,当我在 header.js 中 console.log(AmplitudeService) 时,它会输出我的 Window 对象。因此,Window 不包含 "logEvent"、"identifyUser" 等函数,因此 AmplitudeService 在这种情况下不可用。
感谢任何和所有见解!
AmplitudeService.js (source)
注意:如果您检查作者的语法,他 return 在他的服务结束时是一个对象。在我的研究中,我读到在定义服务函数(source)时使用 "this" 关键字,并且您不需要像使用工厂那样 return 一个对象, 所以我相应地更新了它。
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);
}
}]);
angular-amplitude.js (source)
这允许在整个应用程序中访问“$amplitude”
(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 {}'
};
}]);
看起来您正在向您的控制器中注入 $scope
,导致意外映射变量
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 {}'
};
}]);
顺便说一句,如果在定义控制器时发现这种格式更容易阅读/使用
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 {}'
};
}