AngularJS exchange 2つのモジュール間のデータ

2つのHTMLページを角度モジュールとして作成しました。AngularJS exchange 2つのモジュール間のデータ

var app = angular.module("oneApp", []); 

app 
    .controller(
      'controller-one', 
      [ 
        '$scope', 
        '$http', 
        function($scope, $http) {...functions..}]);

どのように異なる制御ファイルでもあります。しかし、今私はいくつかのデータを交換するためにこの2つのコントローラが必要です。

私はSOにこの関連Qeustionが見つかりました： related Thread

ことにcontrollorに変更しようとし...

var app = angular.module("oneApp", ['twoAoo']);

..私は注入エラーを取得します。両方のファイルが関連していないからだと思います。データを正しく交換する方法を教えてください。

出典

2016-11-14 Offset

2つのモジュール間でデータを共有するには、サービスを使用する必要があります。

var otherApp = angular.module('otherApp', []); 
otherApp.factory('myService', function() { 
    var myService = { 
    someData: '' 
    }; 
    return myService; 
}); 
otherApp.controller('otherCtrl', function($scope, myService) { 
    $scope.shared = myService; 
}); 


var app = angular.module('myApp', ['otherApp']); 

app.controller('myCtrl', function($scope, myService) { 
    $scope.shared = myService; 
});

この記事では、さらにあなたを助けることができる：@Penmanが言ったようにhttps://thinkster.io/a-better-way-to-learn-angularjs/servicesが

出典

2016-11-14 13:20:44 Penman

：VARアプリ= angular.module（ 'MyApp]を' ['otherApp']）;私の2番目のページ（サービスを使用するはずです）がクラッシュし、注入エラーで壊れます。既に言われたようなものです。 – Offset

、あなたがサービスを使用する必要があります（ここでは、私は工場を使用しました）。

非常に単純な使用例は、何かを記録するメソッドを持つサービスを持つことです。次に、2つの異なるモジュールからこのサービスを使用します。

ここで私はそれをやった方法は次のとおりです。 "ログ1" ボタンが表示さに

index.htmlを

<body> 

    <div ng-app="appOne"> 
    <div ng-controller="appOneCtrl"> 
     {{ name }} <button ng-click="log()">Log</button> 
    </div> 

    <div ng-app="appTwo"> 
     <div ng-controller="appTwoCtrl"> 
     {{ name }} <button ng-click="log()">Log</button> 
     </div> 
    </div> 
    </div> 

</body>

script.js

// APP 1 
const app1 = angular.module('appOne', ['appTwo']); 

app1.controller('appOneCtrl', function($scope, $log, sharedFactory) { 
    $scope.name = 'App 1, ctrl 1'; 

    $scope.log =() => { 
    $log.info('Click on log button from appOne'); 
    sharedFactory.logMeSomething(); 
    }; 
}); 

// ----------------------------------------- 

// APP 2 
const app2 = angular.module('appTwo', []); 

app2.controller('appTwoCtrl', function($scope, $log, sharedFactory) { 
    $scope.name = 'App 2, ctrl 2'; 

    $scope.log =() => { 
    $log.info('Click on log button from appTwo'); 
    sharedFactory.logMeSomething(); 
    }; 
}); 

app2.factory('sharedFactory', function($log) { 
    return { 
    logMeSomething:() => { 
     $log.debug('Something logged from sharedFactory !'); 
    } 
    }; 
});

クリック：

を"ログ2" ボタンが表示さの3210

クリック：

Click on log button from appTwo 
Something logged from sharedFactory !

は、ここに私の解決策の作業Plunkrです：この行う

https://plnkr.co/edit/sgOKkh0eh0URPGIP9dZY?p=preview

出典

2016-11-14 14:16:53 Maxime

はいわかっています。私はこれを試した。しかし、App2にApp1を依存関係として追加すると、このサイトのコンソールと角括弧では謎のエラーメッセージが表示されます。 – Offset

これは理論であり、私はあなたがあなたのアプリケーションを構築したことを知らない。オープンソースですか？もしそうなら、ソースコードを共有してみるとよいでしょう。それ以外の場合は、問題を再現するPlunkrを作成して作業してください）。 – Maxime

私は私の誤りを見つけたと思う。私はコントローラスクリプトを使って私のページ（アプリ）を動的に含んでいます。これはotherAppもロードされていないことを意味します。他の問題が発生します。しかし、それは別の質問:) – Offset

AngularJS exchange 2つのモジュール間のデータ

答えて

関連する問題