AngularJS-Richtlinien beherrschen

() translation by (you can also view the original English article)

Direktiven sind eine der leistungsstärksten Komponenten von AngularJS, mit denen Sie grundlegende HTML-Elemente / Attribute erweitern und wiederverwendbaren und testbaren Code erstellen können. In diesem Tutorial zeige ich Ihnen, wie Sie AngularJS-Richtlinien mit Best Practices aus der Praxis verwenden.

Was ich hier mit directions meine, sind hauptsächlich benutzerdefinierte Anweisungen während des Tutorials. Ich werde nicht versuchen, Ihnen zu zeigen, wie man eingebaute Direktiven wie ng-repeat, ng-show usw. benutzt. Ich werde Ihnen zeigen, wie Sie benutzerdefinierte Direktiven verwenden, um Ihre eigenen Komponenten zu erstellen.

Gliederung

Einfache Anweisungen
Einschränkungen der Richtlinie
Isolierter Bereich
Richtlinienbereiche
Richtlinie Vererbung
Direktive Debugging
Richtlinie Unit Testing
Richtlinienumfangsprüfung
Fazit

1. Einfache Richtlinien

Nehmen wir an, Sie haben eine eCommerce-Anwendung für Bücher und Sie zeigen bestimmte Buchdetails in verschiedenen Bereichen an, z. B. Kommentare, Benutzerprofilseiten, Artikel usw. Ihr Buchdetail-Widget kann wie folgt aussehen:

In diesem Widget gibt es ein Buchbild, Titel, Beschreibung, Kommentare und Bewertung. Das Sammeln dieser Informationen und das Einfügen eines bestimmten dom-Elements kann an jedem Ort, an dem Sie es verwenden möchten, schwierig sein. Lassen Sie uns diese Ansicht mit einer AngularJS-Direktive verändern.

angular.module('masteringAngularJsDirectives', [])
.directive('book', function() {
    return {
        restrict: 'E',
        scope: {
            data: '='
        },
        templateUrl: 'templates/book-widget.html'
    }
})

Im obigen Beispiel wurde eine Anweisungsfunktion verwendet, um zuerst eine Direktive zu erstellen. Der Name der Direktive ist Buch. Diese Direktive gibt ein Objekt zurück und lassen Sie uns ein wenig über dieses Objekt sprechen. restrict dient zum Definieren des Anweisungstyps und kann A (Attribut), C (Klasse), E (Element) und M (Kommentar) sein. Sie können die Verwendung von jeweils unten sehen.

Geben Sie	Verwendung ein
A	<div book></div>
C	<div class="book"></div>
E	<book data="book_data"></book>
M	<!-- richtlinie: book -->

scope dient zur Verwaltung des Richtlinie Anwendungsbereich. Im obigen Fall werden Buchdaten mit dem Geltungstyp "=" in die Richtlinienvorlage übertragen. In den folgenden Abschnitten werde ich ausführlich über den Umfang sprechen. templateUrl wird zum Aufrufen einer Ansicht verwendet, um mithilfe von Daten, die in den Richtlinienbereich übertragen wurden, bestimmte Inhalte zu rendern. Sie können auch Vorlage verwenden und HTML-Code direkt wie folgt bereitstellen:

1	.....
2	template: '<div>Book Info</div>'
3	.....

In unserem Fall haben wir eine komplizierte HTML-Struktur und deshalb habe ich die Option templateUrl gewählt.

2. Einschränkungen der Richtlinie

Richtlinien werden in der JavaScript-Datei Ihres AngularJS-Projekts definiert und in der HTML-Seite verwendet. Es ist möglich, AngularJS-Direktiven in HTML-Seiten wie folgt zu verwenden:

A (Attribut)

In dieser Verwendung wird der Anweisungsname innerhalb von Standard-HTML-Elementen verwendet. Nehmen wir an, Sie haben ein rollenbasiertes Menü in Ihrer eCommerce-Anwendung. Dieses Menü wird entsprechend Ihrer aktuellen Rolle gebildet. Sie können eine Direktive definieren, um zu entscheiden, ob das aktuelle Menü angezeigt werden soll oder nicht. Ihr HTML-Menü kann wie folgt aussehen:

<ul>
    <li>Home</li>
    <li>Latest News</li>
    <li restricted>User Administration</li>
    <li restricted>Campaign Management</li>
</ul>

und die Richtlinie wie folgt:

app.directive("restricted", function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            // Some auth check function
            var isAuthorized = checkAuthorization();
            if (!isAuthorized) {
                element.css('display', 'none');
            }
        }
    }
})

Wenn Sie die eingeschränkte Anweisung im Menüelement als Attribut verwenden, können Sie für jedes Menü eine Überprüfung der Zugriffsebene durchführen. Wenn der aktuelle Benutzer nicht berechtigt ist, wird dieses spezielle Menü nicht angezeigt.

Also, was ist die Link-Funktion dort? Die Verknüpfungsfunktion ist einfach die Funktion, die Sie für richtlinienspezifische Operationen verwenden können. Die Direktive macht nicht nur HTML-Code, indem sie einige Eingaben liefert. Sie können auch Funktionen an das richtende Element binden, einen Dienst aufrufen und den Wert der Anweisung aktualisieren, richtungsabhängige Attribute abrufen, wenn es sich um eine E-Typ-Anweisung handelt, usw.

C (Klasse)

Sie können den Anweisungsnamen in HTML-Elementklassen verwenden. Angenommen, Sie verwenden die obige Anweisung als C, können Sie die Direktive restricte als C aktualisieren und wie folgt verwenden:

<ul>
    <li>Home</li>
    <li>Latest News</li>
    <li class="nav restricted">User Administration</li>
    <li class="nav active restricted">Campaign Management</li>
</ul>

Jedes Element verfügt bereits über eine Klasse zum Formatieren, und da die restricted Klasse hinzugefügt wird, handelt es sich tatsächlich um eine Direktive.

E (Element)

Sie müssen keine Direktive innerhalb eines HTML-Elements verwenden. Sie können ein eigenes Element erstellen, indem Sie eine AngularJS-Direktive mit einer E-Einschränkung verwenden. Nehmen wir an, Sie haben ein Benutzer-Widget in Ihrer Anwendung, um username, avatar und reputation an mehreren Stellen in Ihrer Anwendung anzuzeigen. Vielleicht möchten Sie eine Direktive wie diese verwenden:

app.directive("user", function() {
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            scope.username = attrs.username;
            scope.avatar = attrs.avatar;
            scope.reputation = attrs.reputation;
        },
        template: '<div>Username: {{username}}, Avatar: {{avatar}}, Reputation: {{reputation}}</div>'
    }
})

Der HTML-Code wird sein:

1	<user username="huseyinbabal" avatar="https://www.gravatar.com/avatar/ef36a722788f5d852e2635113b2b6b84?s=128&d=identicon&r=PG" reputation="8012"></user>

Im obigen Beispiel wird ein benutzerdefiniertes Element erstellt und einige Attribute wie Benutzername, Avatar und Reputation bereitgestellt. Ich möchte auf den Link-Funktionskörper aufmerksam machen. Elementattribute werden dem Anweisungsbereich zugewiesen. Der erste Parameter der Link-Funktion ist der Gültigkeitsbereich der aktuellen Anweisung. Der dritte Parameter der Direktive ist das Attributobjekt der Direktive, was bedeutet, dass Sie jedes Attribut aus der benutzerdefinierten Direktive lesen können, indem Sie attrs.attr_name verwenden. Attributwerte werden dem Bereich zugewiesen, sodass sie innerhalb der Vorlage verwendet werden.

Tatsächlich können Sie diese Operation auf eine kürzere Art und Weise durchführen, und ich werde später darüber sprechen. Dieses Beispiel dient dazu, die Grundidee der Verwendung zu verstehen.

M (Kauf)

Diese Verwendung ist nicht sehr üblich, aber ich werde zeigen, wie man sie benutzt. Nehmen wir an, Sie benötigen ein Kommentarformular für Ihre Anwendung, das Sie an vielen Stellen verwenden können. Sie können das tun, indem Sie die folgende Anweisung verwenden:

app.directive("comment", function() {
    return {
        restrict: 'C',
        template: '<textarea class="comment"></textarea>'
    }
})

Und im HTML-Element:

1	<!-- directive:comment -->

3. Isolierter Umfang

Jede Direktive hat ihren eigenen Gültigkeitsbereich, aber Sie müssen bei der Deklaration der Direktive auf die Datenbindung achten. Nehmen wir an, Sie implementieren den Basket-Teil Ihrer eCommerce-Anwendung. Auf der Warenkorbseite haben Sie bereits Artikel, die Sie bereits hinzugefügt haben. Jedes Element hat seine Feld "Betrag", wie viele Elemente auswählen, wie unter kaufen möchten:

Hier ist die Erklärung der Richtlinie:

app.directive("item", function() {
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            scope.name = attrs.name;
        },
        template: '<div><strong>Name:</strong> {{name}} <strong>Select Amount:</strong> <select name="count" ng-model="count"><option value="1">1</option><option value="2">2</option></select> <strong>Selected Amount:</strong> {{count}}</div>'
    }
})

Und um drei Elemente in HTML anzuzeigen:

1	<item name="Item-1"></item>
2	<item name="Item-2"></item>
3	<item name="Item-3"></item>

Das Problem hier ist, dass, wenn Sie die Menge des gewünschten Artikels wählen, alle Mengenabschnitte der Artikel aktualisiert werden. Warum? Da eine bidirektionale Datenbindung mit einer count besteht, der Bereich jedoch nicht isoliert ist. Um den Gültigkeitsbereich zu isolieren, fügen Sie einfach scope: {} zum directory-Attribut im Rückgabebereich hinzu:

app.directive("item", function() {
    return {
        restrict: 'E',
        scope: {},
        link: function(scope, element, attrs) {
            scope.name = attrs.name;
        },
        template: '<div><strong>Name:</strong> {{name}} <strong>Select Amount:</strong> <select name="count" ng-model="count"><option value="1">1</option><option value="2">2</option></select> <strong>Selected Amount:</strong> {{count}}</div>'
    }
})

Dies führt dazu, dass Ihre Anweisung einen eigenen isolierten Gültigkeitsbereich hat, so dass die wechselseitige Datenbindung innerhalb dieser Richtlinie getrennt auftritt. Ich werde später auch auf das Scope-Attribut eingehen.

4. Geltungsbereich der Richtlinie

Der Hauptvorteil der Richtlinie besteht darin, dass es sich um eine wiederverwendbare Komponente handelt, die problemlos verwendet werden kann. Sie können dieser Richtlinie sogar einige zusätzliche Attribute hinzufügen. Aber wie ist es möglich, einen zusätzlichen Wert, eine Bindung oder einen Ausdruck an eine Richtlinie zu übergeben, damit Daten innerhalb der Richtlinie verwendet werden können?

"@" Geltungsbereich: Dieser Geltungstyp wird zum Übergeben von Werten an den Geltungsbereich der Richtlinie verwendet. Angenommen, Sie möchten ein Widget für eine Benachrichtigung erstellen:

app.controller("MessageCtrl", function() {
    $scope.message = "Product created!";
})
app.directive("notification", function() {
    return {
        restrict: 'E',
        scope: {
            message: '@'
        },
        template: '<div class="alert">{{message}}</div>'
    }
});

und Sie können verwenden:

1	<notification message="{{message}}"></notification>

In diesem Beispiel wird der Nachrichtenwert einfach dem Anweisungsbereich zugewiesen. Der gerenderte HTML-Inhalt ist:

1	<div class="alert">Product created!</div>

"=" Scope: In diesem Scope-Typ werden Scope-Variablen anstelle der Werte übergeben, was bedeutet, dass wir {{message}}nicht weitergeben, sondern stattdessen eine message übergeben. Der Grund für diese Funktion besteht in der Konstruktion einer bidirektionalen Datenbindung zwischen der Direktive und den Seitenelementen oder Controllern. Lass es uns in Aktion sehen.

.directive("bookComment", function() {
    return {
        restrict: 'E',
        scope: {
            text: '='
        },
        template: '<input type="text" ng-model="text"/>'
    }
})

In dieser Anweisung versuchen wir, ein Widget zu erstellen, mit dem Kommentartexteingaben angezeigt werden, um einen Kommentar für ein bestimmtes Buch abzugeben. Wie Sie sehen, benötigt diese Anweisung einen Attribut text, um eine wechselseitige Datenbindung zwischen anderen Elementen auf den Seiten zu erstellen. Sie können dies auf der Seite verwenden:

1	<span>This is the textbox on the directive</span>
2	<book-comment text="commentText"></book-comment>

Dies zeigt einfach eine Textbox auf der Seite an, also fügen wir etwas mehr hinzu, um mit dieser Direktive zu interagieren:

<span>This is the textbox on the page</span>
<input type="text" ng-model="commentText"/>
<br/>
<span>This is the textbox on the directive</span>
<book-comment text="commentText"></book-comment>

Wenn Sie etwas in das erste Textfeld eingeben, wird es auch in das zweite Textfeld eingegeben. Das kannst du umgekehrt tun. In der Direktive haben wir statt des Werts die Bereichsvariable commentText übergeben, und diese Variable ist die Datenbindungsreferenz für das erste Textfeld.

"&" Scope: Wir können den Wert übergeben und auf Anweisungen verweisen. In diesem Geltungsbereich werden wir uns ansehen, wie man Ausdrücke an die Direktive übergeben kann. In realen Fällen müssen Sie möglicherweise eine bestimmte Funktion (Ausdruck) an Anweisungen übergeben, um eine Kopplung zu verhindern. Manchmal müssen Richtlinien nicht viel über die Idee hinter den Ausdrücken wissen. Zum Beispiel, eine Direktive mag das Buch für dich, aber es weiß nicht, wie man das macht. Um dies zu tun, können Sie einer Struktur wie folgt folgen:

.directive("likeBook", function() {
    return {
        restrict: 'E',
        scope: {
            like: '&'
        },
        template: '<input type="button" ng-click="like()" value="Like"/>'
    }
})

In dieser Direktive wird ein Ausdruck über das like-Attribut an den Direktiven-Button übergeben. Lassen Sie uns eine Funktion im Controller definieren und sie an die Anweisung im HTML übergeben.

1	$scope.likeFunction = function() {
2	alert("I like the book!")
3	}

Dies wird innerhalb des Controllers sein, und die Vorlage wird sein:

1	<like-book like="likeFunction()"></like-book>

likeFunction() kommt vom Controller und wird an die Direktive übergeben. Was ist, wenn Sie einen Parameter an likeFunction() übergeben möchten? Beispielsweise müssen Sie möglicherweise einen Bewertungswert an likeFunction() übergeben. Es ist sehr einfach: Fügen Sie der Funktion innerhalb des Controllers einfach ein Argument hinzu und fügen Sie der Anweisung ein Eingabeelement hinzu, das die Startzählung des Benutzers erfordert. Sie können das wie folgt tun:

.directive("likeBook", function() {
    return {
        restrict: 'E',
        scope: {
            like: '&'
        },
        template: '<input type="text" ng-model="starCount" placeholder="Enter rate count here"/><br/>' +
        '<input type="button" ng-click="like({star: starCount})" value="Like"/>'
    }
})

1	$scope.likeFunction = function(star) {
2	alert("I like the book!, and gave " + star + " star.")
3	}

1	<like-book like="likeFunction(star)"></like-book>

Wie Sie sehen können, stammt das Textfeld von der Direktive. Der Textfeldwert ist an das Funktionsargument wie like ({star: starCount}) gebunden. Stern ist für die Controller-Funktion und StarCount für die Textbox Wert Bindung.

5. Vererbung von Richtlinien

Manchmal verfügen Sie möglicherweise über eine Funktion, die in mehreren Direktiven vorhanden ist. Sie können in eine Eltern-Direktive eingefügt werden, so dass sie von den Kind-Direktiven geerbt werden.

Lass mich dir ein konkretes Beispiel geben. Sie möchten statistische Daten senden, wenn Kunden ihren Mauszeiger an den Anfang eines bestimmten Buchs bewegen. Sie können ein Mausklick-Ereignis für die Buchanweisung implementieren, aber was ist, wenn es von einer anderen Anweisung verwendet wird? In diesem Fall können Sie die Vererbung der Anweisungen wie folgt verwenden:

app.directive('mouseClicked', function() {
    return {
        restrict: 'E',
        scope: {},
        controller: "MouseClickedCtrl as mouseClicked"
    }
})

Dies ist eine übergeordnete Direktive, die von untergeordneten Anweisungen geerbt wird. Wie Sie sehen können, gibt es ein Controller-Attribut der Direktive, das die "as" -Richtlinie verwendet. Lassen Sie uns auch diesen Controller definieren:

app.controller('MouseClickedCtrl', function($element) {
    var mouseClicked = this;

    mouseClicked.bookType = null;

    mouseClicked.setBookType = function(type) {
        mouseClicked.bookType = type
    };

    $element.bind("click", function() {
        alert("Typeof book: " + mouseClicked.bookType + " sent for statistical analysis!");
    })
})

In diesem Controller setzen wir einfach eine Controller-Instanz der Variablen bookType, indem wir untergeordnete Anweisungen verwenden. Wenn Sie auf ein Buch oder eine Zeitschrift klicken, wird der Elementtyp an den Back-End-Dienst gesendet (ich habe eine Warnfunktion verwendet, um die Daten anzuzeigen). Wie können Kinderrichtlinien diese Richtlinie nutzen?

app.directive('ebook', function() {
    return {
        require: "mouseClicked",
        link: function(scope, element, attrs, mouseClickedCtrl) {
            mouseClickedCtrl.setBookType("EBOOK");
        }
    }
})
.directive('magazine', function() {
    return {
        require: "mouseClicked",
        link: function(scope, element, attrs, mouseClickedCtrl) {
            mouseClickedCtrl.setBookType("MAGAZINE");
        }
    }
})

Wie Sie sehen, verwenden untergeordnete Anweisungen das Schlüsselwort require, um die übergeordnete Anweisung zu verwenden. Und noch ein wichtiger Punkt ist das vierte Argument der Link-Funktion in den Child-Direktiven. Dieses Argument bezieht sich auf das Controller-Attribut der Eltern-Direktive, was bedeutet, dass die Child-Direktive die Controller-Funktion setBookType im Controller verwenden kann. Wenn das aktuelle Element ein eBook ist, können Sie die erste Anweisung verwenden. Wenn es sich um eine Zeitschrift handelt, können Sie die zweite verwenden:

1	<a><mouse-clicked ebook>Game of thrones (click me)</mouse-clicked></a><br/>
2	<a><mouse-clicked magazine>PC World (click me)</mouse-clicked></a>

Untergeordnete Anweisungen sind wie eine Eigenschaft der übergeordneten Richtlinie. Wir haben die Verwendung des Mausklickereignisses für jede untergeordnete Anweisung eliminiert, indem wir diesen Abschnitt in die übergeordnete Anweisung eingefügt haben.

6. Debugging von Richtlinien

Wenn Sie Anweisungen in der Vorlage verwenden, sehen Sie auf der Seite die kompilierte Version der Anweisung. Manchmal möchten Sie die tatsächliche Verwendung der Direktive für Debugging-Zwecke sehen. Um die nicht kompilierte Version des aktuellen Abschnitts anzuzeigen, können Sie ng-non-bindable verwenden. Angenommen, Sie haben ein Widget, das die beliebtesten Bücher druckt, und hier ist der Code dafür:

1	<ul>
2	<li ng-repeat="book in books">{{book}}</li>
3	</ul>

Die Scope-Variable des Buchs kommt vom Controller und die Ausgabe ist wie folgt:

Wenn Sie die Verwendung der Anweisung hinter dieser kompilierten Ausgabe kennen möchten, können Sie diese Version des Codes verwenden:

1	<ul ng-non-bindable="">
2	<li ng-repeat="book in books">{{book}}</li>
3	</ul>

Diesmal wird die Ausgabe wie folgt aussehen:

Es ist bis jetzt cool, aber was, wenn wir sowohl die unkompilierten als auch die kompilierten Versionen des Widgets sehen wollen? Es ist Zeit, eine benutzerdefinierte Anweisung zu schreiben, die eine erweiterte Debugging-Operation ausführt.

app.directive('customDebug', function($compile) {
    return {
        terminal: true,
        link: function(scope, element) {
            var currentElement = element.clone();
            currentElement.removeAttr("custom-debug");
            var newElement = $compile(currentElement)(scope);
            element.attr("style", "border: 1px solid red");
            element.after(newElement);
        }
    }
})

In dieser Direktive klonen wir das Element, das sich im Debug-Modus befindet, so dass es nach einigen Operationen nicht geändert wird. Entfernen Sie nach dem Klonen die custom-debug-Direktive, um nicht als Debug-Modus zu fungieren, und kompilieren Sie sie dann mit $complile, das bereits in die Direktive eingefügt wurde. Wir haben dem Debug-Modus-Element einen Stil gegeben, um den Debug-Modus hervorzuheben. Das Endergebnis wird wie folgt sein:

Sie können Ihre Entwicklungszeit speichern, indem Sie diese Art von Debuggerichtlinie verwenden, um die Ursache eines Fehlers in Ihrem Projekt zu erkennen.

7. Testen der Direktiven

Wie Sie bereits wissen, ist Komponententests ein sehr wichtiger Teil der Entwicklung, um den Code, den Sie geschrieben haben, vollständig zu kontrollieren und mögliche Fehler zu vermeiden. Ich werde nicht tief in Unit-Tests eintauchen, sondern gebe Ihnen einen Anhaltspunkt darüber, wie Sie Richtlinien auf verschiedene Arten testen können.

Ich werde Jasmine für Unit Tests und Karma für den Unit Test Runner verwenden. Um Karma zu verwenden, installieren Sie es einfach global, indem Sie npm install -g karma karma-cli ausführen (auf Ihrem Computer müssen Node.js und npm installiert sein). Öffnen Sie nach der Installation die Befehlszeile, wechseln Sie in Ihren Projektstammordner und geben Sie karma init ein. Es stellt Ihnen einige Fragen wie unten, um Ihre Testanforderungen einzurichten.

Ich benutze Webstorm für die Entwicklung, und wenn Sie auch Webstorm verwenden, klicken Sie einfach mit der rechten Maustaste auf karma.conf.js und wählen Sie Run karma.conf.js. Dies führt alle Tests aus, die im Karma Conf konfiguriert sind. Sie können Tests auch mit der Befehlszeile von karma start im Stammordner des Projekts ausführen. Das ist alles über die Umgebung, also wechseln wir zum Testteil.

Nehmen wir an, wir wollen die Buchanweisung testen. Wenn wir einen Titel an die Direktive übergeben, sollte er in eine Buchdetailansicht kompiliert werden. Also lasst uns anfangen.

describe("Book Tests", function() {
    var element;
    var scope;
    beforeEach(module("masteringAngularJsDirectives"))
    beforeEach(inject(function($compile, $rootScope) {
        scope = $rootScope;
        element = angular.element("<booktest title='test'></booktest>");
        $compile(element)($rootScope)
        scope.$digest()
    }));

    it("directive should be successfully compiled", function() {
        expect(element.html()).toBe("test")
    })
});

Im obigen Test testen wir eine neue Richtlinie namens Booktest. Diese Anweisung verwendet den Argumenttitel und erstellt ein div mit diesem title. Im Test rufen wir vor jedem Testabschnitt zuerst unser Modul masteringAngularJsDirectives auf. Dann erzeugen wir eine Direktive namens booktest. In jedem Testschritt wird die Direktivenausgabe getestet. Dieser Test dient nur zur Überprüfung des Wertes.

8. Prüfung der Geltungsbereiche der Richtlinie

In diesem Abschnitt werden wir den Anwendungsbereich des Direktiven Booktest testen. Diese Direktive generiert eine Buchdetailansicht auf der Seite. Wenn Sie auf diesen Detailabschnitt klicken, wird eine Bereichsvariable namens "Gesehen" als "Wahr" festgelegt. In unserem Test überprüfen wir, ob "ansured" auf "true" gesetzt ist, wenn das click-Ereignis ausgelöst wird. Die Richtlinie lautet:

.directive('booktest', function() {
    return {
        restrict: 'E',
        scope: {
            title: '@'
        },
        replace: true,
        template: '<div>{{title}}</div>',
        link: function(scope, element, attrs) {
            element.bind("click", function() {
                console.log("book viewed!");
                scope.viewed = true;
            });
        }
    }
})

Um ein Ereignis für ein Element in AngularJS innerhalb der Direktive festzulegen, können Sie das Attribut link verwenden. Innerhalb dieses Attributs haben Sie das aktuelle Element, das direkt an ein Klickereignis gebunden ist. Um diese Anweisung zu testen, können Sie Folgendes verwenden:

describe("Book Tests", function() {
    var element;
    var scope;
    beforeEach(module("masteringAngularJsDirectives"))
    beforeEach(inject(function($compile, $rootScope) {
        scope = $rootScope;
        element = angular.element("<booktest title='test'></booktest>");
        $compile(element)($rootScope)
        scope.$digest()
    }));

    it("scope liked should be true when book liked", function() {
        element.triggerHandler("click");
        expect(element.isolateScope().viewed).toBe(true);
    });
});

In der Testsektion wird ein Click-Ereignis ausgelöst, indem element.triggerHandler ("click") verwendet wird. Wenn ein Klickereignis ausgelöst wird, muss die angezeigte Variable als wahr festgelegt werden. Dieser Wert wird mithilfe von expect (element.isolateScope (). Viewed) .toBe (true) festgelegt.

9. Schlussfolgerung

Um modulare und testbare Web-Projekte zu entwickeln, ist AngularJS das Beste gemeinsam. Richtlinien sind eine der besten Komponenten von AngularJS, und das bedeutet, je mehr Sie über AngularJS-Richtlinien wissen, desto modularer und testbarer können Sie Projekte entwickeln.

In diesem Tutorial habe ich versucht, Ihnen die Best Practices in Bezug auf Richtlinien zu zeigen, und bedenken Sie, dass Sie eine Menge Pra ausführen müssen Ich hoffe, dieser Artikel hilft Ihnen, AngularJS-Richtlinien gut zu verstehen.