複数のアンギュラ・モジュール間でサービスを共有する

Question

私は非正統的な角度設定をしており、動作するかどうか疑問に思っています。

ビルドしているウェブアプリを5つのアプリに分割しました。各モジュールには独自のモジュールがあり、それをhulに組み込むjsファイルにコンパイルする独自のgulpビルドです。 1ページに1つのjsビルドがあります。

次に、私はsharedServiceモジュールを持っています。他の各モジュールには、このsharedServiceモジュールが注入されます。共有サービスには独自のgulpビルドがあり、他のすべてのページが継承するマスターテンプレートに含まれているので、すべてのページにこの共有テンプレートjs​​が作成されます。

私は現在、あるアプリケーションのsharedServiceへの変更は、もう一方のアプリケーションに移動しても反映されません。私は、各アプリケーションが自分自身のバージョンのsharedServiceを使っていると思っています。実際には共有されていないか、具体的には、次のアプリケーションに移動するときにページが更新され、その中に存在するデータを失うサービスが再ロードされます。

私はtypescriptを使用しており、browserifyしています。

私のアプリケーションのうちの一つの例：

'use strict'; 

declare var angular, require:any; 

angular.module('compareApp', ['ui.router', 'sharedServices']); 

// require module dependencies 
require('./compareAppConfig.ts'); 
require('./compareController.ts'); 

共有サービスアプリ：

'use strict'; 

declare var angular, require:any; 

angular.module('sharedServices', []); 

require('./services/dogService.ts'); 
require('./services/userService.ts'); 

とサービスの1の例：したがって、基本的

declare var require, angular:any; 

angular.module('sharedServices').service('userService', userService); 

const API_PATH = "/api/"; 

function userService($http, $q) { 

    var userData = { 
     favorites: [] 
    }; 

    function getUser(){ 
     return userData; 
    } 

    function saveFavorite(dogId){ 
     userData.favorites.push(dogId); 
    } 

    return { 
     saveFavorite: saveFavorite, 
     getFavorite: getFavorite 
    }; 
} 

export = userService; 

1つのアプリでお気に入りの配列に犬を保存してから、その配列が空の別のアプリに移動します。

Answer 1

あなたはwebappを分割すると、別々のhtmlファイルを意味するのですか？

完全に別のページ/ htmlファイルに移動している場合は、ページが読み込まれたときにコードが再実行されます。したがって、共有サービス内のデータはすべて消去されます。

状態を維持しながらアプリケーションの別のページにルーティングする場合は、ui-routerを使用してクライアント側のルーティングを検討することをお勧めします。