AngularJS Controller als Service oder Service als Controller

Question

Während der Erstellung der Dashboard-Anwendung kam ich zu der Situation, wo ich AngularJS Controller und Service in einem haben muss.

Am main (1.) Seite Ich habe mainController (nichts mit Layout) und auch layoutController, die mit den Tasten mit Methoden binded ist loadLayoutFromAPI() und saveLayoutToAPI().

Jetzt gibt es nur sekundär (2nd) secondController und nicht layoutController. Ich muss Methoden von der layoutController direkt von secondController verwenden und ich bevorzuge es nicht ng-controller Direktive in den HTML-Code (stattdessen setzen Sie es auf secondController durch Abhängigkeit-Injektion wie Service).

Mainpage (1.):

<div ng-controller="mainController"> 
    <!-- some other code --> 

    <div ng-controller="layoutController as ctrl"> 
     <a href="#" ng-click="ctrl.loadLayoutFromAPI()">Load</a> 
     <a href="#" ng-click="ctrl.saveLayoutToAPI()">Save</a> 
    </div> 
</div> 

SecondaryPage (2.):

<div ng-controller="secondController"> 
    <!-- some other code --> 
</div> 

Ich habe versucht, für dieses Problem zu suchen, aber keine Antworten auf alle gefunden.

Frage: Wie soll ich gleiches Stück Code (Methoden save() und load()) einmal als Controller (ng-controller) und andere Zeit als Service (via dependency-injection enthielt)?

Dank

JS Bin als

Answer 1

Sie Methoden nicht von anderen Steuerungen verwenden, um direkt von anderen Steuerungen ... Deshalb sind Dienstleistungen da. Controller sind nur da, um sich mit der Ansicht zu beschäftigen!

Wenn Sie zwischen Controllern, Direktiven oder irgendetwas anderem kommunizieren möchten, für das Dienste, Fabriken und Anbieter zuständig sind. Beim Bau jede Anwendung, Sie immer abstrahieren gemeinsame Funktionalität zu einem gewissen Art von Service

Zum Beispiel:

//Just an APP def 
var app = angular.module('dashApp', []); 

//LayoutController 
app 
    .controller('layoutController', ['CtrlService', function(ctrlService){ 
    this.saveLayoutToAPI = function(){ 
    ctrlService.save(); 
    } 
    this.loadLayoutFromAPI = function(){ 
    ctrlService.load(); 
    } 
}]); 

//Main Controller 
app 
    .controller('mainController', function(){ 
    //no work with layout at all 
}); 

//Secondary controller 

app 
    .controller('secondController', ['CtrlService', function(ctrlService){ 
    this.save = function(){ 
    ctrlService.save(); 
    } 
    this.load = function(){ 
    ctrlService.load(); 
    } 
}]); 

app 
    .service('CtrlService', function() { 

    var obj = { 
     save: function() { 
     console.log('Layout saved.'); 
     }, 
     load: function() { 
     console.log('Layout loaded.'); 
     } 
    } 

    this.save = obj.save; 
    this.load = obj.load; 
    }); 

Answer 2

angefordert du $ übertragen erreichen nutzen können.

Unten ist das Diagramm, das das Konzept erklärt.

Beispielcode in Controller-2

$rootScope.$broadcast('saveCalled'); 

Beispielcode in Controller-1

$scope.$on('saveCalled',function(){ 
     saveLayoutToApi(); 
    })