AngularJS Datenaustausch zwischen zwei Modulen

Ich habe 2 HTML-Seiten als Winkelmodule erstellt.AngularJS Datenaustausch zwischen zwei Modulen

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

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

Beide wie differrent controllor Dateien. Aber jetzt brauche ich diese beiden Controller, um Daten auszutauschen.

fand ich diese verwandten qeustion in SO: related Thread

Wenn sich ändernden auf controllor zu, dass der Versuch ..

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

.. ich eine Injektion Fehler. Ich denke, das liegt daran, dass beide Dateien nicht verwandt sind. Wie erreicht man den korrekten Datenaustausch?

Quelle

2016-11-14 Offset

Um Daten zwischen zwei Modulen zu teilen, müssen Sie einen Dienst verwenden.

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; 
});

Dieser Artikel kann Ihnen weiterhelfen: https://thinkster.io/a-better-way-to-learn-angularjs/services

Quelle

2016-11-14 13:20:44 Penman

dies zu tun: var app = angular.module ('myApp', ['andereApp']); verursacht, dass meine zweite Seite (die den Dienst verwenden sollte) abstürzt und mit einem Injektionsfehler bricht. wie schon gesagt. – Offset

Wie @Penman sagte, sollten Sie einen Dienst nutzen (hier habe ich eine Fabrik).

Ein sehr einfacher Anwendungsfall ist ein Dienst mit einer Methode, die etwas protokolliert. Dann nutzen wir diesen Service aus 2 verschiedenen Modulen.

Hier ist, wie ich es tat:

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 !'); 
    } 
    }; 
});

Ein Klick auf "Log 1" Taste angezeigt:

Click on log button from appOne 
Something logged from sharedFactory !

Ein Klick auf "Log 2" Knopf angezeigt:

Click on log button from appTwo 
Something logged from sharedFactory !

Hier ist eine Arbeits Plunkr meiner Lösung:

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

Quelle

2016-11-14 14:16:53 Maxime

Ja, ich verstehe. Ich habe es versucht. Aber wenn App2 als Abhängigkeit zu App1 hinzugefügt wurde, bekam ich eine kryptische Fehlermeldung in der Konsole und Winkelbrüche für diese Site. – Offset

Dies ist die Theorie und ich bin mir nicht bewusst, dass Sie Ihre App gebaut haben. Ist es Open Source? Wenn ja, teilen Sie den Quellcode und ich werde es mir ansehen. Versuchen Sie andernfalls, einen Plunkr zu erstellen, der das Problem reproduziert, damit wir etwas haben, an dem wir arbeiten können;). – Maxime

Ich denke, ich habe meinen Fehler gefunden. Ich schließe meine Seite (App) mit dem Controller-Skript dynamisch ein. Dies bedeutet, dass die otherApp nicht einmal geladen ist. Das bringt ein anderes Problem mit sich. Aber das ist eine differente Frage :) – Offset

AngularJS Datenaustausch zwischen zwei Modulen

Antwort

Verwandte Themen