Erste Schritte mit AngularJS: Kommunikationsprozess zwischen Direktive und Controller

Erste Schritte mit AngularJS: Kommunikationsprozess zwischen Direktive und Controller_AngularJS

WBOY

Freigeben： 2016-05-16 15:18:12

Original

1394 Leute haben es durchsucht

AngularJS erweitert HTML um neue Eigenschaften und Ausdrücke. Angularjs ist auch sehr einfach zu erlernen.

1. Wer ist AngularJS

Angular JS (Angular.JS) ist eine Reihe von Frameworks, Vorlagen, Datenbindungen und umfangreichen UI-Komponenten, die zur Entwicklung von Webseiten verwendet werden. Es unterstützt den gesamten Entwicklungsprozess und stellt die Architektur von Webanwendungen ohne manuelle DOM-Manipulation bereit.

AngularJS wurde entwickelt, um die Mängel von HTML beim Erstellen von Anwendungen zu überwinden. HTML ist eine gute deklarative Sprache, die für die statische Textanzeige entwickelt wurde, aber beim Erstellen von WEB-Anwendungen ist sie schwach. Hier entsteht AngularJS, das die natürlichen Mängel von HTML ausgleicht und zum Erstellen von Webanwendungen verwendet wird.

2. Wie man AngularJS versteht

AngularJS wurde 2009 geboren, von Misko Hevery und anderen erstellt und später von Google übernommen.

Offizielle AngularJS-Website: http://www.angularjs.org (im Allgemeinen wird sie blockiert, sodass Sie die folgende Website besuchen können)

Chinesische AngularJS-Website: http://www.ngnice.com

Bücher: „AngularJS Authoritative Tutorial“, „Entwicklung von Webanwendungen der nächsten Generation mit AngularJS“ usw. Persönliche Meinung, Zu Ihrer Information

Anmerkungen: Video-Tutorial, ich habe mir kürzlich das AngularJS-Tutorial von Teacher Da Mo angesehen. Ich fand es ziemlich gut, aber ich habe das Gefühl, dass ich es ohne Grundkenntnisse immer noch nicht verstehen kann oder es mir mehrmals ansehen muss (nicht). für Werbung)

3. Warum Sie AngularJS verstehen müssen

Damit eine neue Technologie auf den Markt kommt, allen bekannt wird und dann auffällt, muss sie definitiv ihre einzigartigen und einzigartigen Eigenschaften haben:

(1) Die Idee von MVC (oder MVVM)

(2) Modularisierung und Abhängigkeitsinjektion

(3) Zwei-Wege-Datenbindung

(4) Befehl

Jede Funktion kann in großem Umfang erweitert werden. Offensichtlich reichen die aktuellen Funktionen nicht aus, um sie zu erweitern. Wenn Sie interessiert sind, können Sie online suchen und sich ein allgemeines Verständnis verschaffen.

Heute werde ich hauptsächlich über die Verwendung und die Unterschiede der drei Direktiven „@“, „=" und „&" von AngularJS sprechen (dieses Problem beschäftigte mich den größten Teil des Tages und ich verstand es erst, nachdem ich mit Frank kommuniziert hatte). viele Male)

1.@

im Anweisungsbereich

wird verwendet, um das aktuelle Attribut als Zeichenfolge zu übergeben.

Geben Sie zuerst den Code ein, die Front-End-Schnittstelle:

<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-">
<link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
<div ng-controller="MyCtrl">
<drink water="{{pureWater}}"></drink>
</div>
</body>
<script src="../js/angular.js">
<script src="ScopeAt.js"></script>
</html>

Nach dem Login kopieren

JS-Code:

var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.pureWater="纯净水";
}])
myModule.directive("drink", function() {
return {
restrict:'AE',
scope:{
water:'@'
},
template:"<div>{{water}}</div>"
}
});

Nach dem Login kopieren

Die Ausführungsergebnisse sind unauffällig, aber es gibt verborgene Geheimnisse:

(1) Deklarieren Sie auf der HTML-Seite ein Tag , das einen Attributnamen definiert: Wasser Attributwert: pureWater ({{}} hier ist ein allgemeiner Ausdruck in AngularJS, Ähnlich wie ng-Modell, wird für die Wertbindung verwendet)

(2) Beginnen Sie in der JS-Datei zuerst mit dem Modul, erstellen Sie dann eine Controller-Zeile 2 bis Zeile 4 und definieren Sie dann eine Anweisung. Die Hauptimplementierung besteht darin, „“ zu ersetzen. mit „

“Tag-Anzeige

(3) Konzentrieren Sie sich hier auf

scope:{
water:'@'
}

Nach dem Login kopieren

Dieser Ausdruck entspricht:

link:function(scope,element,attrs){
scope.water=attrs.water;
}

Nach dem Login kopieren

Die spezifische Bedeutung besteht darin, einen Attributnamen zu definieren: Wasser im Umfang der Anweisung. Sein Wert ist der Wert des Wasserattributs in der Front-End-Schnittstelle, also „{{pureWater}}“;

Gleichzeitig ist der Wert von {{pureWater}} aus dem deklarierten Controller ersichtlich:

$scope.pureWater="Reines Wasser";

Auf der letzten Seite wird also „gereinigtes Wasser“ angezeigt und der Hauptprozess ist:

a. Verwenden Sie in der Anweisung @, um die Anweisung mit dem HTML-Seitenelement zu verknüpfen;

b. Die Verbindung mit der Seite wird im Controller realisiert;

c. Dadurch wird die Verbindung zwischen dem Controller und dem Befehl über die HTML-Seite hergestellt, die auch eine Kommunikationsmethode ist.

Einzelheiten finden Sie im Bild unten:

2. =

im Geltungsbereich der Richtlinie

Die Funktion besteht darin, eine bidirektionale Bindung mit den Eigenschaften im übergeordneten Bereich durchzuführen.

<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-">
<link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
<div ng-controller="MyCtrl">
Ctrl:
<br>
<input type="text" ng-model="pureWater">
<br>
Directive:
<br>
<drink water="pureWater"></drink>
</div>
</body>
<script src="../js/angular.js"></script>
<script src="ScopeEqual.js"></script>
</html>
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.pureWater="纯净水";
}])
myModule.directive("drink", function() {
return {
restrict:'AE',
scope:{
water:'='
},
template:'<input type="text" ng-model="water"/>'
}
});

Nach dem Login kopieren

Die Methode von = ist hier ähnlich. Auf der Seite werden zwei Eingabefelder eingerichtet, um den Umfang des Befehls bzw. des Controllers darzustellen können sich gegenseitig in ihrem jeweiligen Bereich beeinflussen. Die spezifische Idee ist ähnlich wie bei @, daher werde ich nicht auf Details eingehen:

3.&

im Geltungsbereich der Richtlinie

Die Hauptfunktion besteht darin, eine Funktion aus dem übergeordneten Bereich zu übergeben, die später aufgerufen werden soll.

<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-">
<link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
<div ng-controller="MyCtrl">
<greeting greet="sayHello(name)"></greeting>
<greeting greet="sayHello(name)"></greeting>
<greeting greet="sayHello(name)"></greeting>
</div>
</body>
<script src="../js/angular.js"></script>
<script src="ScopeAnd.js"></script>
</html>
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.sayHello=function(name){
alert("Hello "+name);
}
}])
myModule.directive("greeting", function() {
return {
restrict:'AE',
scope:{
greet:'&'
},
template:'<input type="text" ng-model="userName" /><br/>'+
'<button class="btn btn-default" ng-click="greet({name:userName})">Greeting</button><br/>'
}
});

Nach dem Login kopieren

Seperti yang dapat dilihat dari halaman, teg ditakrifkan di sini, dan nama atribut ditakrifkan di dalamnya. Berbeza daripada @ dan = di atas, nama atribut diikuti oleh kaedah, Oleh itu, & di sini digunakan terutamanya untuk memindahkan fungsi antara Pengawal dan arahan untuk merealisasikan komunikasi fungsi antara keduanya Dalam JS, gantikan tag ucapan di meja depan dengan kandungan dalam templat, kotak input tambah butang, Fungsi salam terikat pada butang, yang menggemakan fungsi salam pada halaman hadapan Fungsi salam pada halaman hadapan ditakrifkan dalam pengawal, jadi fungsi salam dalam pengawal juga dipanggil dalam arahan. Keputusan pelaksanaan adalah seperti berikut:

(1)Antara muka awal

(2) Isikan nilai dalam kotak teks pertama

(2) Isikan nilai dalam kotak teks kedua

(3) Isikan kotak teks ketiga