AngularJS: Mehrere Controller zu einer Ansicht

Question

Heutzutage spiele ich mit MVC pattern unter Verwendung AngularJS. Ich bin viel verwirrt zwischen Controller, Modellen und Ansichten. Was ich bisher verstanden habe, ist, dass wir im MVC-Muster folgende drei haben:

1) Modell: Modell ist eine der Logik, oder Datenbank oder die Daten selbst. In Anguarljs werden Modelle mithilfe von Fabriken oder Dienstleistungen erstellt.

2) Ansichten: Ansicht ist, wie unsere Daten für den Benutzer dargestellt oder angezeigt werden. Dies repräsentiert einfach unser Modell für den Benutzer.

3) Controller: Controller ist etwas, das steuert. Wie auf Coding Horror geschrieben, ist Controller der Kopf der Anwendung. Der Controller entscheidet, was die Benutzereingabe war, wie sich das Modell als Ergebnis dieser Eingabe ändern muss und welche resultierende Ansicht verwendet werden sollte.

Also mit Blick auf die Definition von Controller kann ich sagen, Controller ist der Chef. Es wird verantwortlich sein für alles, was passieren wird. In meiner Anwendung habe ich paar Modelle wie Projekt, Form, Notiz usw.. Was ich tue ist, ich habe factories für jedes Modell erstellt. z.B. ProjectFactory, ShapeFactory, NoteFactory. Und ich habe controller für jeden von ihnen, d. H. ProjectController, ShapeController, NoteController erstellt, um Sachen in Bezug auf Projekt, Form und Notiz zu steuern. Ich bin mir nicht sicher, ob es korrekt ist oder nicht.

In meiner Anwendung habe ich auch ein paar Ansichten, d. H. map-view.html, project-view.html. Für jede Ansicht gibt es Controller MapViewController, ProjectViewController. Meine Projektansicht benötigt Projekte und Notizen. Also muss ich ProjectViewController, ProjectController, NoteController in meinem Projekt-view.html verwenden. Ich weiß nicht, wie ich das machen kann. Ich kann eine Leiter von Controller wie folgt erstellen:

<div ng-controller="ProjectController"> 
    <div ng-controller="NoteController"> 
     <div ng-controller="ProjectController"> 
     Project view goes here 
     </div> 
    </div> 
</div> 

Aber es ist nicht ein guter Weg, dies zu tun morgen verursachen werde ich große Anzahl von Modell haben, so kann ich nicht diese Leiter schaffen und auch den Umfang der Eltern den Zugriff auf wird ein Schmerz im Rücken sein. Es wird wie:

$socpe.$parent.$parent.$parent.data='Set data.'

Antoher apporach ist, dass ich Dienste wie ProjectService, ShapeService und Noteservice und nutzen diese Dienste in ProjectViewController erstellen können. Aber das führt mich zur Verwirrung, da all die Dinge, die von den Thesen services erledigt werden, von controller gehandhabt werden sollten und diese Controller an mehreren Stellen/Ansichten verwendet werden sollten. Ist es korrekt oder die Controller ich meine angularjs Controller sind anders als MVC Pattern Controller? Ich bin mit all diesen Konzepten verwirrt.

Answer 1

Versuchen Sie es mit Direktiven stattdessen

<div ProjectDirective> 
    <div NoteDirective> 
     <div> 

     </div> 
    </div> 
</div> 

Auf diese Weise erhalten Sie eine Chance, mvc für jede Richtlinie zu schaffen, und Sie können diese nach Richtlinie isoliert haben. Viel einfacher zu organisieren.

Beispiel Richtlinie Funktion,

 // Code goes here 
var app = angular.module('demoApp', []); 


(function(angular) { 
    'use strict'; 

    var projectDirective = function() { 
    function controller() { 
     this.hello = 'I am from project directive.'; 
     console.log('Not sure why this is not getting called'); 
    } 

    function link() { 
    } 

    return { 
     restrict: 'EA', 
     link: link, 
     controller: controller, 
     template: '<div>{{ctrl.hello}}<span ng-transclude></span></div>', 
     //templateUrl: 'xxx.html', 
     controllerAs: 'ctrl', 
     bindToController: true, 
     transclude: true, 
     scope: {} 
    }; 
    }; 
    app.directive('projectDirective', [projectDirective]); 
})(angular); 

(function(angular) { 

    app.controller('ViewController', ['$scope', function($scope) { 
    $scope.greeting = "I am from ViewController"; 
    }]); 
}(angular));