Я создаю сайт электронной коммерции (основанный на shopify), и я использую несколько небольших приложений для работы с угловыми файлами для обработки таких вещей, как быстрая корзина покупок, списки пожеланий, фильтрующие продукты и несколько других мелких предметов. Сначала я использовал одно большое приложение (у которого была маршрутизация и все), но это было немного ограничительным, когда у меня не было полного REST API.
Есть несколько сервисов, которые я бы хотел разделить между приложениями angular (услуга тележки, поэтому у меня есть кнопка быстрого добавления, которая будет отображаться в мини-тележке и т.д.), но я не уверенный в лучшем способе (если есть способ) об этом. Простое разделение модуля с сервисом не поддерживает одно и то же состояние в приложениях.
Я попробовал свою руку, но я не уверен, что он обновляет состояние между обоими приложениями. Ниже приведен javascript, который я пытался использовать. Это также на jsfiddle с сопровождающим 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']);
Любая помощь будет оценена