Ausführliche Erläuterung der Verwendung von AngularJS controller_AngularJS

Die Rolle des Controllers in Angularjs besteht darin, die Ansicht zu verbessern. Es handelt sich tatsächlich um eine Funktion, die zum Hinzufügen zusätzlicher Funktionen zum Bereich in der Ansicht verwendet wird. Wir verwenden ihn, um den Anfangszustand des Bereichsobjekts festzulegen und benutzerdefiniertes Verhalten hinzuzufügen. .

Wenn wir einen Controller auf der Seite erstellen, generiert Angularjs einen $scope und übergibt ihn an den Controller. Da Angularjs den Controller automatisch instanziiert, müssen wir nur den Konstruktor schreiben. Das folgende Beispiel zeigt die Controller-Initialisierung:

function my Controller($scope){
 $scope.msg="hello,world!"; 
}

Die obige Methode zum Erstellen eines Controllers verschmutzt den globalen Namespace. Ein vernünftigerer Ansatz besteht darin, ein Modul zu erstellen und dann den Controller wie folgt im Modul zu erstellen:

var myApp=angular.module("myApp",[]);
myApp.controller("myController",function($scope){
 $scope.msg="hello,world!";
})

Verwenden Sie den integrierten Befehl ng-click, um Schaltflächen, Links und andere DOM-Elemente an Klickereignisse zu binden. Die ng-click-Direktive bindet das Mouseup-Ereignis im Browser an den Ereignishandler, der für das DOM-Element festgelegt ist (wenn der Browser beispielsweise ein Klickereignis für ein DOM-Element auslöst, wird die Funktion aufgerufen). Ähnlich wie im vorherigen Beispiel sieht die Bindung so aus:

<div ng-controller="FirstController">
<h4>The simplest adding machine ever</h4>
<button ng-click="add(1)" class="button">Add</button>
<a ng-click="subtract(1)" class="button alert">Subtract</a>
<h4>Current count: {{ counter }}</h4>
</div>

Schaltflächen und Links sind an eine Operation im internen $scope gebunden, die die entsprechende Methode aufruft, wenn auf ein beliebiges Element geklickt wird. Beachten Sie, dass beim Festlegen der aufzurufenden Funktion auch ein Parameter (add(1)) in Klammern

app.controller('FirstController', function($scope) {
$scope.counter = 0;
$scope.add = function(amount) { $scope.counter += amount; };
$scope.subtract = function(amount) { $scope.counter -= amount; };
});

Der größte Unterschied zwischen Angularjs und anderen Frameworks besteht darin, dass der Controller nicht für die Durchführung von DOM-Operationen, Formatierungs- oder Datenoperationen und Statusverwaltungsoperationen außer dem Speichern des Datenmodells geeignet ist. Er ist lediglich eine Brücke zwischen der Ansicht und dem $scope . .

Controller-Verschachtelung (Bereich enthält Bereich)

Jeder Teil einer AngularJS-Anwendung hat einen übergeordneten Bereich, unabhängig davon, in welchem ​​Kontext er gerendert wird. Für die Ebene, auf der sich ng-app befindet, ist der übergeordnete Bereich $rootScope.

Wenn AngularJS eine Eigenschaft im aktuellen Bereich nicht finden kann, sucht es standardmäßig im übergeordneten Bereich danach. Wenn AngularJS das entsprechende Attribut nicht finden kann, sucht es entlang des übergeordneten Bereichs nach oben, bis es $rootScope erreicht. Wenn es in $rootScope nicht gefunden wird, wird das Programm weiter ausgeführt, aber die Ansicht wird nicht aktualisiert.

Schauen wir uns dieses Verhalten anhand eines Beispiels an. Erstellen Sie einen ParentController, der ein Benutzerobjekt enthält, und erstellen Sie dann einen ChildController, um auf dieses Objekt zu verweisen:

app.controller('ParentController', function($scope) {
$scope.person = {greeted: false};
});
app.controller('ChildController', function($scope) {
$scope.sayHello = function() {
$scope.person.name = 'Ari Lerner';
};
});

Wenn wir den ChildController innerhalb des ParentControllers platzieren, ist der übergeordnete Bereich des $scope-Objekts des ChildControllers das $scope-Objekt des ParentControllers. Gemäß dem Mechanismus der prototypischen Vererbung können wir im untergeordneten Bereich auf das $scope-Objekt von ParentController zugreifen.

<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
{{ person }}
</div>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für Ihr Studium hilfreich sein und Ihnen helfen, sich mit dem AngularJS-Controller vertraut zu machen.