在多个 angular.js 应用程序之间共享单个服务 [英] Share a single service between multiple angular.js apps
问题描述
我正在构建一个电子商务网站(基于 shopify),我正在使用多个小型 angularjs 应用程序来处理诸如快速购物车、心愿单、过滤产品和其他一些较小的项目之类的事情.我最初使用了一个大型应用程序(具有路由和所有功能),但是当我没有完整的 REST API 时,它有点受限制.
I'm building an ecommerce site (based on shopify) and I'm using multiple small angularjs apps to handle things such as a quick shopping cart, wishlists, filtering products and a few other smaller items. I initially used one big application (that had routing and everything), but it was a bit to restrictive when I didn't have a full REST API.
我想在 Angular 应用程序之间共享一些服务(购物车服务,所以我可以有一个快速添加按钮,该按钮将反映在迷你购物车等中),但我不确定最好的方法(如果有的话)来解决这个问题.只是与服务共享一个模块并不能在应用之间保持相同的状态.
There are a couple of services that I would like to share between the angular apps (the cart service, so I can have a quick add button that will reflect in the mini-cart and such), but I'm not sure of the best way (if there is a way) to go about this. Just sharing a module with the service doesn't keep the same state across the apps.
我试过了,但它似乎没有更新两个应用程序之间的状态.以下是我尝试使用的 javascript.它也在 jsfiddle 上附带 html:http://jsfiddle.net/k9KM7/1/>
I tried my hand at it, but I it doesn't seem to update state between both apps. The following is the javascript I tried using. It's also on jsfiddle with accompanying html: http://jsfiddle.net/k9KM7/1/
angular.module('test-service', [])
.service('TestService', function($window){
var text = 'Initial state';
if (!!$window.sharedService){
return $window.sharedService;
}
$window.sharedService = {
change: function(newText){
text = newText;
},
get: function(){
return text;
}
}
return $window.sharedService;
});
angular.module('app1', ['test-service'])
.controller('App1Ctrl', function($scope, TestService){
$scope.text = function(){ return TestService.get() }
$scope.change = function(){ TestService.change('app 1 activated') }
});
angular.module('app2', ['test-service'])
.controller('App2Ctrl', function($scope, TestService){
$scope.text = function(){ return TestService.get() }
$scope.change = function(){ TestService.change('app 2 activated') }
});
var app1El = document.getElementById('app1');
var app2El = document.getElementById('app2');
angular.bootstrap(app1El, ['app1', 'test-service']);
angular.bootstrap(app2El, ['app2', 'test-service']);
任何帮助将不胜感激
推荐答案
sharedService
正在共享,但一个 Angular 应用程序不知道其他应用程序中的某些内容已更新,因此它不会开始$digest
.您必须通过调用 $rootscope.$apply()
The sharedService
is being shared, but one angular app doesn't know that something updated in the other app so it doesn't kick off a $digest
. You have to manually tell the $rootScope
of each application to start a $digest
by calling $rootscope.$apply()
小提琴:http://jsfiddle.net/pvtpenguin/k9KM7/3/
angular.module('test-service', [])
.service('TestService', function($rootScope, $window){
var text = 'Initial state';
$window.rootScopes = $window.rootScopes || [];
$window.rootScopes.push($rootScope);
if (!!$window.sharedService){
return $window.sharedService;
}
$window.sharedService = {
change: function(newText){
text = newText;
angular.forEach($window.rootScopes, function(scope) {
if(!scope.$$phase) {
scope.$apply();
}
});
},
get: function(){
return text;
}
}
return $window.sharedService;
});
这篇关于在多个 angular.js 应用程序之间共享单个服务的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!