AngularJS
Controller
Suche…
Syntax
- <htmlElement ng-controller = "controllerName"> ... </ htmlElement>
- <script> app.controller ('controllerName', controllerFunction); </ script>
Dein erster Controller
Ein Controller ist eine grundlegende Struktur, die in Angular verwendet wird, um den Umfang zu erhalten und bestimmte Aktionen auf einer Seite auszuführen. Jeder Controller ist mit einer HTML-Ansicht gekoppelt.
Nachfolgend finden Sie eine Grundversion für eine Angular-App:
<!DOCTYPE html>
<html lang="en" ng-app='MyFirstApp'>
<head>
<title>My First App</title>
<!-- angular source -->
<script src="https://code.angularjs.org/1.5.3/angular.min.js"></script>
<!-- Your custom controller code -->
<script src="js/controllers.js"></script>
</head>
<body>
<div ng-controller="MyController as mc">
<h1>{{ mc.title }}</h1>
<p>{{ mc.description }}</p>
<button ng-click="mc.clicked()">
Click Me!
</button>
</div>
</body>
</html>
Hier sind einige Dinge zu beachten:
<html ng-app='MyFirstApp'>
Wenn Sie den Anwendungsnamen mit ng-app festlegen, können Sie auf die Anwendung in einer externen Javascript-Datei zugreifen, auf die weiter unten eingegangen wird.
<script src="js/controllers.js"></script>
Wir benötigen eine Javascript-Datei, in der Sie Ihre Controller und ihre Aktionen / Daten definieren.
<div ng-controller="MyController as mc">
Das Attribut ng-controller legt den Controller für dieses DOM-Element und alle untergeordneten Elemente (rekursiv) fest.
Sie können mehrere Controller desselben MyController (in diesem Fall MyController ) haben, indem Sie sagen, dass ... as mc dieser Instanz des Controllers ein Alias MyController wird.
<h1>{{ mc.title }}</h1>
Die {{ ... }} Notation ist ein Winkelausdruck. In diesem Fall wird der innere Text dieses <h1> -Elements auf den Wert von mc.title .
Hinweis: Angular verwendet eine mc.title Datenbindung, dh unabhängig davon, wie Sie den mc.title Wert aktualisieren, wird er sowohl im Controller als auch auf der Seite mc.title .
Beachten Sie auch , dass Angular Ausdrücke keinen Controller verweisen müssen. Ein Angular-Ausdruck kann so einfach wie {{ 1 + 2 }} oder {{ "Hello " + "World" }} .
<button ng-click="mc.clicked()">
ng-click ist eine Angular-Direktive. In diesem Fall wird das Click-Ereignis für die Schaltfläche MyController die MyController clicked() Funktion der MyController Instanz MyController .
In diesem Sinne schreiben wir eine Implementierung des MyController Controllers. Mit dem obigen Beispiel würden Sie diesen Code in js/controller.js schreiben.
Zunächst müssen Sie die Angular-App in Ihrem Javascript instanziieren.
var app = angular.module("MyFirstApp", []);
Beachten Sie, dass der Name, den wir hier übergeben, mit dem Namen übereinstimmt, den Sie in Ihrem HTML-Code mit der Direktive ng-app .
Nun, da wir das App-Objekt haben, können wir damit Controller erstellen.
app.controller('MyController', function(){
var ctrl = this;
ctrl.title = "My First Angular App";
ctrl.description = "This is my first Angular app!";
ctrl.clicked = function(){
alert("MyController.clicked()");
};
});
Hinweis: Für alle Elemente, die Teil der Controller-Instanz sein möchten, verwenden wir das Schlüsselwort this .
Dies ist alles, was erforderlich ist, um eine einfache Steuerung aufzubauen.
Controller erstellen
angular
.module('app')
.controller('SampleController', SampleController)
SampleController.$inject = ['$log', '$scope'];
function SampleController($log, $scope){
$log.debug('*****SampleController******');
/* Your code below */
}
Hinweis: Der .$inject sicher, dass Ihre Abhängigkeiten nach der Minifizierung nicht durcheinander geraten. Stellen Sie außerdem sicher, dass die angegebene Funktion in Ordnung ist.
Erstellen von Controllern, Minification-Safe
Es gibt verschiedene Möglichkeiten, die Controller-Erstellung vor Minification zu schützen.
Die erste heißt Inline-Array-Annotation. Es sieht wie folgt aus:
var app = angular.module('app');
app.controller('sampleController', ['$scope', '$http', function(a, b){
//logic here
}]);
Der zweite Parameter der Controller-Methode kann ein Array von Abhängigkeiten akzeptieren. Wie Sie sehen können, habe ich $scope und $http die den Parametern der Controller-Funktion entsprechen sollten, in denen a der $scope , und b wäre $http . Beachten Sie, dass das letzte Element im Array die Controller-Funktion sein sollte.
Die zweite Option verwendet die $inject Eigenschaft. Es sieht wie folgt aus:
var app = angular.module('app');
app.controller('sampleController', sampleController);
sampleController.$inject = ['$scope', '$http'];
function sampleController(a, b) {
//logic here
}
Dies macht dasselbe wie die Inline-Array-Annotation, bietet jedoch ein anderes Design für diejenigen, die eine Option der anderen vorziehen.
Die Reihenfolge der injizierten Abhängigkeiten ist wichtig
Stellen Sie beim Einfügen von Abhängigkeiten mit dem Array-Formular sicher, dass die Liste der Abhängigkeiten mit der entsprechenden Liste der an die Controller-Funktion übergebenen Argumente übereinstimmt.
Beachten Sie, dass im folgenden Beispiel $scope und $http umgekehrt sind. Dies führt zu einem Problem im Code.
// Intentional Bug: injected dependencies are reversed which will cause a problem
app.controller('sampleController', ['$scope', '$http',function($http, $scope) {
$http.get('sample.json');
}]);
Verwenden von ControllerAs in Angular JS
In Angular $scope ist die Verbindung zwischen Controller und View, die alle unsere Datenbindungsanforderungen unterstützt. Controller As ist eine andere Möglichkeit, Controller und View zu binden und wird meistens empfohlen. Grundsätzlich sind dies die beiden Controller-Konstrukte in Angular (dh $ scope und Controller As).
Verschiedene Arten der Verwendung von Controller As are -
controllerAs View-Syntax
<div ng-controller="CustomerController as customer">
{{ customer.name }}
</div>
controllerAs Controller-Syntax
function CustomerController() {
this.name = {};
this.sendMessage = function() { };
}
ControllerAs mit vm
function CustomerController() {
/*jshint validthis: true */
var vm = this;
vm.name = {};
vm.sendMessage = function() { };
}
controllerAs ist syntaktischer Zucker über $scope . Sie können immer noch an die View binden und auf $scope Methoden zugreifen. Die Verwendung von controllerAs ist eine der Best Practices, die das Winkel-Kernteam vorschlägt. Dafür gibt es viele Gründe, wenige davon -
$scopezeigt die Mitglieder der Steuerung über ein Zwischenobjekt an der Ansicht an. Mitthis.*Einstellungthis.*können wir genau das zeigen, was wir vom Controller für die Ansicht verfügbar machen möchten. Es folgt auch der Standard-JavaScript-Methode, um dies zu verwenden.Wenn Sie die
controllerAsSyntax verwenden, verfügen wir über besser lesbaren Code. Auf die übergeordnete Eigenschaft kann über den Aliasnamen des übergeordneten Controllers zugegriffen werden, anstatt die$parentSyntax zu verwenden.Es fördert die Verwendung der Bindung für ein "gepunktetes" Objekt in der Ansicht (z. B. customer.name anstelle des Namens), das kontextbezogener, lesbarer ist und alle Referenzprobleme vermeidet, die ohne "Dotting" auftreten können.
Verhindert die Verwendung von
$parentAufrufen in Ansichten mit verschachtelten Controllern.Verwenden Sie dazu eine Erfassungsvariable, wenn Sie die
controllerAsSyntax verwenden. Wählen Sie einen konsistenten Variablennamen wievm, der für ViewModel steht.thisSchlüsselwort ist kontextabhängig und kann bei Verwendung innerhalb einer Funktion in einem Controller seinen Kontext ändern. Durch das Erfassen des Kontextes wird vermieden, dass dieses Problem auftritt.
ANMERKUNG: Verwenden Sie die controllerAs Syntax, um sie dem aktuellen controllerAs hinzuzufügen, so dass er als Feld verfügbar ist
<div ng-controller="Controller as vm>...</div>
vm ist als $scope.vm verfügbar.
Erstellen von Minification-Safe-Winkelreglern
Um minification sichere Winkel Controller zu erstellen, wird die Änderung controller Funktionsparameter.
Das zweite Argument in der module.controller Funktion sollte ein Array übergeben werden , wobei der letzte Parameter die Controller-Funktion ist und jeder Parameter davor der Name jedes injizierten Werts ist.
Dies unterscheidet sich vom normalen Paradigma; das übernimmt die Controller-Funktion mit den eingegebenen Argumenten.
Gegeben:
var app = angular.module('myApp');
Der Controller sollte so aussehen:
app.controller('ctrlInject',
[
/* Injected Parameters */
'$Injectable1',
'$Injectable2',
/* Controller Function */
function($injectable1Instance, $injectable2Instance) {
/* Controller Content */
}
]
);
Hinweis: Die Namen der injizierten Parameter müssen nicht übereinstimmen, werden jedoch in der Reihenfolge gebunden.
Dies wird auf etwas Ähnliches reduziert:
var a=angular.module('myApp');a.controller('ctrlInject',['$Injectable1','$Injectable2',function(b,c){/* Controller Content */}]);
Der Minifizierungsprozess ersetzt jede Instanz der app durch a , jede Instanz von $Injectable1Instance durch b und jede Instanz von $Injectable2Instance durch c .
Verschachtelte Controller
Verschachtelungscontroller ketten auch den $scope . Wenn Sie eine $scope Variable im verschachtelten Controller ändern, wird dieselbe $scope Variable im übergeordneten Controller geändert.
.controller('parentController', function ($scope) {
$scope.parentVariable = "I'm the parent";
});
.controller('childController', function ($scope) {
$scope.childVariable = "I'm the child";
$scope.childFunction = function () {
$scope.parentVariable = "I'm overriding you";
};
});
Versuchen wir nun, beide zu behandeln, verschachtelt.
<body ng-controller="parentController">
What controller am I? {{parentVariable}}
<div ng-controller="childController">
What controller am I? {{childVariable}}
<button ng-click="childFunction()"> Click me to override! </button>
</div>
</body>
Das Schachteln von Controllern mag seine Vorteile haben, aber dabei muss eines bedacht werden. Durch Aufrufen der ngController Direktive wird eine neue Instanz des Controllers erstellt. ngController kann häufig zu Verwirrung und unerwarteten Ergebnissen führen.