Erstellen einer Web App von Grund auf in AngularJS

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

In einem früheren AngularJS-Tutorial habe ich alle Grundlagen behandelt, um mit Angular in etwa 30 Minuten loszulegen. In diesem Tutorial erfahren Sie, was dort behandelt wurde, indem Sie eine einfache, echte Webanwendung erstellen.

Diese einfache Webanwendung ermöglicht es den Benutzern, TV Show Premieren für die nächsten 30 Tage zu sehen, zu suchen und zu filtern. Als begeisterter Serienbetrachter bin ich immer auf der Suche nach etwas Neuem, wenn meine Lieblingssendungen nicht gesendet werden. Daher dachte ich, ich würde eine App erstellen, die mir hilft, das zu finden, wonach ich suche.

Bevor wir beginnen, sollten Sie sich die Demo von oben ansehen, um zu sehen, was wir in diesem Tutorial erstellen werden.

Anfangen

Um zu beginnen, benötigen wir eine skelettierte AngularJS-Anwendung, die bereits über alle erforderlichen JavaScript- und CSS-Funktionen verfügt, um die Premieren-App der TV-Show zu erstellen. Gehen Sie voran und laden Sie dieses Skelett von der Schaltfläche "Download-Quelldateien" herunter.

Sobald Sie die Dateien heruntergeladen haben, sollten Sie eine Verzeichnisstruktur wie unten gezeigt haben:

Wenn Sie sich die Verzeichnisstruktur und die enthaltenen Dateien ansehen, werden Sie sehen, dass wir Twitter Bootstrap verwenden werden, um unsere Web App ein wenig hübscher zu machen, aber dieses Tutorial wird Twitter Bootstrap nicht im Detail betrachten (erfahren Sie mehr über Twitter Bootstrap). Außerdem wird in diesem Tutorial nicht gezeigt, wie eine neue AngularJS-Anwendung eingerichtet wird, da das oben erwähnte AngularJS-Tutorial dies bereits ausführlich behandelt.

Nach dem Öffnen von index.html sollten Sie mit Ihrem bevorzugten Browser eine sehr einfache Webseite mit nur einem Titel und einigen grundlegenden Formatierungen sehen, wie unten dargestellt:

Laden in unseren Daten

Das erste, was wir brauchen, um unsere TV-Show-App zu erstellen, sind Informationen über TV-Shows. Wir werden eine API von Trakt.tv verwenden. Bevor wir anfangen können, brauchen Sie einen API-Schlüssel, Sie können sich für einen auf seiner Website registrieren.

Warum diese API verwenden? Muss ich mich wirklich registrieren? Wir verwenden diese API, sodass unsere App echte Daten verwendet und nach der Fertigstellung tatsächlich genutzt wird. Durch die Verwendung dieser API müssen wir keine serverseitigen Implementierungen in diesem Lernprogramm durchlaufen und können uns vollständig auf AngularJS konzentrieren. Ein paar zusätzliche Minuten, um sich für die API zu registrieren, werden sich lohnen.

Jetzt, da Sie Ihren eigenen API-Schlüssel haben, können wir die Trakt-API nutzen, um einige Informationen zu Fernsehshows zu erhalten. Wir werden für dieses Tutorial einen der verfügbaren API-Aufrufe verwenden. Weitere Informationen hierzu finden Sie in den API-Dokumenten. Dieser API-Aufruf liefert uns alle TV-Premieren innerhalb eines bestimmten Zeitrahmens.

Öffne mainController.js und ändere es so, dass es dem folgenden Code entspricht:

    app.controller("mainController", function($scope, $http){

        $scope.apiKey = "[YOUR API KEY HERE]";
        $scope.init = function() {
            //API requires a start date
            var today = new Date();
            //Create the date string and ensure leading zeros if required
            var apiDate = today.getFullYear() + ("0" + (today.getMonth() + 1)).slice(-2) + "" + ("0" + today.getDate()).slice(-2);
            $http.jsonp('http://api.trakt.tv/calendar/premieres.json/' + $scope.apiKey + '/' + apiDate + '/' + 30 + '/?callback=JSON_CALLBACK').success(function(data) {
                console.log(data);
            }).error(function(error) {

            });
        };

    });

Wenn Sie in der Datei index.html nach der folgenden Zeile suchen:

1	<div class="container main-frame" ng-app="TVPremieresApp" ng-controller="mainController" ng-init="init()">

Sie werden sehen, dass die ng-init-Methode die init-Funktion aufruft. Das bedeutet, dass die init () - Funktion in unserem mainController aufgerufen wird, nachdem die Seite geladen wurde.

Wenn Sie die API-Dokumentation für die Kalender / Premieren-Methode gelesen haben, haben Sie gesehen, dass sie drei Parameter benötigt: Ihren API-Schlüssel, das Startdatum (z. B. 20130616) und die Anzahl der Tage.

Um alle drei Parameter zur Verfügung zu stellen, müssen wir zuerst das heutige Datum mithilfe der JavaScripts Date () -Methode ermitteln und es in das API-spezifizierte Datumsformat formatieren, um die apiDate-Zeichenfolge zu erstellen. Jetzt, wo wir alles haben, was wir brauchen, können wir einen $ http.jsonp-Aufruf für die API-Methode erstellen. Dadurch kann unsere Web-App eine URL aufrufen, die nicht zu unserer eigenen Domain gehört und einige JSON-Daten erhält. Stellen Sie sicher, dass? Callback = JSON_CALLBACK dem Anforderungs-URI vorangestellt ist, so dass unsere angefügte .success-Callback-Funktion bei der Antwort aufgerufen wird.

Innerhalb unserer .success-Funktion geben wir dann einfach die empfangenen Daten an die Konsole aus. Öffnen Sie index.html in Ihrem Browser und öffnen Sie die JavaScript-Konsole. Sie sollten etwa Folgendes sehen:

Dies zeigt, dass wir erfolgreich einen Aufruf der Trakt-API ausführen, sich mit unserem API-Schlüssel authentifizieren und einige JSON-Daten erhalten. Jetzt, wo wir unsere TV-Showdaten haben, können wir mit dem Schritt fortfahren.

Unsere Daten anzeigen

Verarbeiten der JSON-Objekte

Bevor wir unsere Daten anzeigen können, müssen wir sie verarbeiten und speichern. Da die API die Premiere-Episoden nach Datum sortiert zurückgibt, möchten wir diese Gruppierung entfernen und nur ein einziges Array mit allen Premieren-Episoden und den zugehörigen Daten erstellen. Ändern Sie mainController.js wie folgt:

    app.controller("mainController", function($scope, $http){
        $scope.apiKey = "[YOUR API KEY]";
        $scope.results = [];
        $scope.init = function() {
            //API requires a start date
            var today = new Date();
            //Create the date string and ensure leading zeros if required
            var apiDate = today.getFullYear() + ("0" + (today.getMonth() + 1)).slice(-2) + "" + ("0" + today.getDate()).slice(-2);
            $http.jsonp('http://api.trakt.tv/calendar/premieres.json/' + $scope.apiKey + '/' + apiDate + '/' + 30 + '/?callback=JSON_CALLBACK').success(function(data) {
                //As we are getting our data from an external source, we need to format the data so we can use it to our desired effect
                //For each day, get all the episodes
                angular.forEach(data, function(value, index){
                    //The API stores the full date separately from each episode. Save it so we can use it later
                    var date = value.date;
                    //For each episodes, add it to the results array
                    angular.forEach(value.episodes, function(tvshow, index){
                        //Create a date string from the timestamp so we can filter on it based on user text input
                        tvshow.date = date; //Attach the full date to each episode
                        $scope.results.push(tvshow);
                    });
                });
            }).error(function(error) {

            });
        };
    });

Der obige Code ist gut kommentiert und sollte leicht zu folgen sein, werfen wir einen Blick auf diese Änderungen. Zuerst deklarieren wir eine Bereichsvariable $ scope.results als ein Array, das unsere verarbeiteten Ergebnisse enthält. Dann verwenden wir angular.forEach (was ähnlich wie jQuerys $ .each-Methode für diejenigen ist, die es wissen), um jede Datumsgruppe zu durchlaufen und das Datum in einer lokalen Datumsvariablen zu speichern.

Wir erstellen dann einen weiteren Loop, der durch jede der TV-Shows innerhalb dieser Datumsgruppe springt, das lokal gespeicherte Datum zum TV-Show-Objekt hinzufügt und schließlich jedes TV-Show-Objekt zum Array $ scope.results hinzufügt. Mit all dem wird unser Array $ scope.results wie folgt aussehen:

Erstellen des Listen-HTML

Wir haben jetzt einige Daten, die wir in einer Liste auf unserer Seite anzeigen möchten. Wir können HTML mit ng-repeat erstellen, um die Listenelemente basierend auf den Daten in $ scope.results dynamisch zu erstellen. Fügen Sie den folgenden HTML-Code innerhalb der ungeordneten Liste mit der Episodenlistenklasse in index.html hinzu:

    <li ng-repeat="tvshow in results">
        <div class="row-fluid">
            <div class="span3">
                <img src="{{tvshow.episode.images.screen}}" />
                <div class="ratings"><strong>Ratings:</strong> <span class="label"><i class="icon-thumbs-up"></i> {{tvshow.episode.ratings.loved}}</span> <span class="label"><i class="icon-thumbs-down"></i> {{tvshow.episode.ratings.hated}}</span> <span class="label label-important" ng-class="{'label-success': tvshow.episode.ratings.percentage >= 50}"><strong>%</strong> {{tvshow.episode.ratings.percentage}}</div>
            </div>
            <div class="span6">
                <h3>{{tvshow.show.title}}: {{tvshow.episode.title}}</h3>
                <p>{{tvshow.episode.overview}}</p>
            </div>
            <div class="span3">
                <div class="fulldate pull-right label label-info">{{tvshow.date}}</div>
                <ul class="show-info">
                    <li><strong>On Air:</strong> {{tvshow.show.air_day}} {{tvshow.show.air_time}}</li>
                    <li><strong>Network:</strong> {{tvshow.show.network}}</li>
                    <li><strong>Season #:</strong> {{tvshow.episode.season}}</li>
                    <li><strong>Genres:</strong> <span class="label label-inverse genre" ng-repeat="genre in tvshow.show.genres">{{genre}}</span></li>
                </ul>
            </div>
        </div>
    </li>

Dieser HTML erstellt einfach ein einzelnes Listenelement mit ng-repeat. ng-repeat = "tvshow in results" gibt angular an, um dieses Listenelement für jedes Objekt im Array $ scope.results zu wiederholen. Denken Sie daran, dass wir den $ -Scope nicht einschließen müssen, da wir uns in einem Element mit einem bestimmten Controller befinden (siehe dazu das vorherige Tutorial).

Innerhalb des li-Elements können wir dann eine TVshow als eine Variable referenzieren, die alle Objektdaten für jede der TV-Shows innerhalb von $ scope.results enthält. Im Folgenden sehen Sie ein Beispiel für eines der Objekte in $ scope.results. So können Sie leicht sehen, wie Sie auf jedes Datensegment verweisen:

    {
    "show":{
        "title":"Agatha Christie's Marple",
        "year":2004,
        "url":"http://trakt.tv/show/agatha-christies-marple",
        "first_aired":1102838400,
        "country":"United Kingdom",
        "overview":"Miss Marple is an elderly spinster who lives in the village of St. Mary Mead and acts as an amateur detective. Due to her long and eventful life crimes often remind her of other incidents. Although Miss Marple looks sweet, frail, and old, she fears nothing; either dead or living.",
        "runtime":120,
        "network":"ITV",
        "air_day":"Monday",
        "air_time":"9:00pm",
        "certification":"TV-14",
        "imdb_id":"tt1734537",
        "tvdb_id":"78895",
        "tvrage_id":"2515",
        "images":{
            "poster":"http://slurm.trakt.us/images/posters/606.jpg",
            "fanart":"http://slurm.trakt.us/images/fanart/606.jpg",
            "banner":"http://slurm.trakt.us/images/banners/606.jpg"
        },
        "ratings":{
            "percentage":91,
            "votes":18,
            "loved":18,
            "hated":0
        },
        "genres":[
            "Drama",
            "Crime",
            "Adventure"
        ]
    },
    "episode":{
        "season":6,
        "number":1,
        "title":"A Caribbean Mystery",
        "overview":"\"Would you like to see a picture of a murderer?\", Jane Marple is asked by Major Palgrave whilst on a luxurious holiday in the West Indies. When she replies that she would like to hear the story, he explains. There once was a man who had a wife who tried to hang herself, but failed. Then she tried again later, and succeeded in killing herself. The man remarried to a woman who then tried to gas herself to death. She failed, but then tried again later and succeeded. Just as Major Palgrave is about to show the picture to her, he looks over her shoulder, appears startled, and changes the subject. The next morning, a servant, Victoria Johnson, finds him dead in his room. Doctor Graham concludes that the man died of heart failure; he showed all the symptoms, and had a bottle of serenite (a drug for high blood pressure) on his table.",
        "url":"http://trakt.tv/show/agatha-christies-marple/season/6/episode/1",
        "first_aired":1371366000,
        "images":{
            "screen":"http://slurm.trakt.us/images/fanart/606-940.jpg"
        },
        "ratings":{
            "percentage":0,
            "votes":0,
            "loved":0,
            "hated":0
        }
    },
    "date":"2013-06-16"
    }

Als Beispiel können wir innerhalb des li-Elements den Titel der Show erhalten, indem wir auf tvshow.show.title verweisen und ihn in doppelte geschweifte Klammern einschließen: {{}}. Mit diesem Verständnis sollte es einfach sein zu sehen, welche Informationen für jedes Listenelement angezeigt werden. Wenn Sie diese Änderungen speichern und index.html in Ihrem Browser öffnen, sollten Sie dank des mit der Skelettstruktur gebündelten CSS eine gut formatierte Liste von TV-Sendungen mit den zugehörigen Informationen und Bildern sehen. Dies wird in der folgenden Abbildung gezeigt:

Bedingte Klassen

Vielleicht hast du es bemerkt oder nicht:

1	ng-class="{'label-success': tvshow.episode.ratings.percentage >= 50}"

... welches an eines der span-Elemente im Abschnitt "Bewertungen" im obigen HTML-Code angehängt ist. ng-class ermöglicht es uns, Klassen auf HTML-Elemente bedingt anzuwenden. Dies ist hier besonders nützlich, da wir dann einen anderen Stil auf das prozentuale Bereichselement anwenden können, abhängig davon, ob der Prozentanteil der TV-Show hoch ist oder nicht.

Im obigen HTML-Beispiel möchten wir die Klasse label-success anwenden, bei der es sich um eine Twitter-Bootstrap-Klasse handelt, die den Bereich so formatiert, dass er einen grünen Hintergrund und weißen Text aufweist. Wir wollen diese Klasse nur dann auf das Element anwenden, wenn der Bewertungsprozentsatz größer oder gleich 50 ist. Wir können das so einfach wie tvshow.episode.ratings.percentage> = 50 tun. Werfen Sie einen Blick in die Liste der formatierten TV-Sendungen Wenn in Ihrem Browser einer der Prozentsätze diese Bedingung erfüllt, sollten sie grün angezeigt werden.

Suchfilter erstellen

Wir haben jetzt eine Liste der kommenden TV-Show-Premieren, was großartig ist, aber es bietet nicht viel Funktionalität. Wir werden nun eine einfache Textsuche hinzufügen, die alle Objekte im Ergebnisarray filtert.

HTML-Elemente an Scope-Variablen binden

Zuerst müssen wir eine $ scope.filterText Variable in mainController.js wie folgt deklarieren:

    app.controller("mainController", function($scope, $http){
        $scope.apiKey = "[YOUR API KEY]";
        $scope.results = [];
        $scope.filterText = null;
        $scope.init = function() {
            //API requires a start date
            var today = new Date();
            //Create the date string and ensure leading zeros if required
            var apiDate = today.getFullYear() + ("0" + (today.getMonth() + 1)).slice(-2) + "" + ("0" + today.getDate()).slice(-2);
            $http.jsonp('http://api.trakt.tv/calendar/premieres.json/' + $scope.apiKey + '/' + apiDate + '/' + 30 + '/?callback=JSON_CALLBACK').success(function(data) {
                //As we are getting our data from an external source, we need to format the data so we can use it to our desired affect
                //For each day get all the episodes
                angular.forEach(data, function(value, index){
                    //The API stores the full date separately from each episode. Save it so we can use it later
                    var date = value.date;
                    //For each episodes add it to the results array
                    angular.forEach(value.episodes, function(tvshow, index){
                        //Create a date string from the timestamp so we can filter on it based on user text input
                        tvshow.date = date; //Attach the full date to each episode
                        $scope.results.push(tvshow);
                    });
                });
            }).error(function(error) {

            });
        };
    });

Jetzt müssen wir eine Texteingabe hinzufügen, damit der Benutzer tatsächlich einen Suchbegriff eingeben kann. Wir müssen dann diese Eingabe an die neu deklarierte Variable binden. Fügen Sie den folgenden HTML-Code in das div mit der Suchfeldklasse in index.html ein.

1	<label>Filter: </label>
2	<input type="text" ng-model="filterText"/>

Hier haben wir ng-model verwendet, um diese Eingabe an die $ scope.filterText-Variable zu binden, die wir in unserem Gültigkeitsbereich deklariert haben. Jetzt wird diese Variable immer gleich sein, was in diese Sucheingabe eingegeben wird.

Erzwingen der Filterung bei `ng-Repeat`-Ausgabe

Jetzt, da wir den zu filternden Text haben, müssen wir die Filterfunktion zu ng-repeat hinzufügen. Dank der integrierten Filterfunktionalität von AngularJS müssen wir dafür kein JavaScript schreiben. Ändern Sie einfach Ihre ng-Wiederholung wie folgt:

1	<li ng-repeat="tvshow in results \| filter: filterText">

So einfach ist das! Wir sagen AngularJS - bevor wir die Daten mit ng-repeat ausgeben, müssen wir den Filter basierend auf der Variable filterText anwenden. Öffnen Sie index.html in einem Browser und führen Sie eine Suche durch. Angenommen, Sie haben nach etwas gesucht, das existiert, sollten Sie eine Auswahl der Ergebnisse sehen.

Erstellen eines benutzerdefinierten Genre-Filters

So können unsere Nutzer nun nach dem suchen, was sie sehen wollen, was besser ist als nur eine statische Liste von TV-Sendungen. Aber wir können unsere Filterfunktion ein wenig erweitern und einen benutzerdefinierten Filter erstellen, mit dem der Benutzer ein bestimmtes Genre auswählen kann. Sobald ein bestimmtes Genre ausgewählt wurde, sollte das ng-repeat nur TV-Sendungen mit dem ausgewählten Genre anzeigen.

Fügen Sie zunächst den folgenden HTML-Code unter der filterText-Eingabe in index.html hinzu, die wir zuvor hinzugefügt haben.

1	<label>Genre: </label>
2	<select ng-model="genreFilter" ng-options="label for label in availableGenres">
3	<option value="">All</option>
4	</select>

Sie können aus dem obigen HTML erkennen, dass wir eine Select-Eingabe erstellt haben, die an eine Modellvariable namens genreFilter gebunden ist. Mit ng-options können wir diese select-Eingabe dynamisch mit einem Array namens availableGenres füllen.

Zuallererst müssen wir diese Bereichsvariablen deklarieren. Aktualisieren Sie Ihre Datei mainController.js wie folgt:

    app.controller("mainController", function($scope, $http){
        $scope.apiKey = "[YOUR API KEY HERE]";
        $scope.results = [];
        $scope.filterText = null;
        $scope.availableGenres = [];
        $scope.genreFilter = null;
        $scope.init = function() {
            //API requires a start date
            var today = new Date();
            //Create the date string and ensure leading zeros if required
            var apiDate = today.getFullYear() + ("0" + (today.getMonth() + 1)).slice(-2) + "" + ("0" + today.getDate()).slice(-2);
            $http.jsonp('http://api.trakt.tv/calendar/premieres.json/' + $scope.apiKey + '/' + apiDate + '/' + 30 + '/?callback=JSON_CALLBACK').success(function(data) {
                //As we are getting our data from an external source, we need to format the data so we can use it to our desired affect
                //For each day get all the episodes
                angular.forEach(data, function(value, index){
                    //The API stores the full date separately from each episode. Save it so we can use it later
                    var date = value.date;
                    //For each episodes add it to the results array
                    angular.forEach(value.episodes, function(tvshow, index){
                        //Create a date string from the timestamp so we can filter on it based on user text input
                        tvshow.date = date; //Attach the full date to each episode
                        $scope.results.push(tvshow);
                        //Loop through each genre for this episode
                        angular.forEach(tvshow.show.genres, function(genre, index){
                            //Only add to the availableGenres array if it doesn't already exist
                            var exists = false;
                            angular.forEach($scope.availableGenres, function(avGenre, index){
                                if (avGenre == genre) {
                                    exists = true;
                                }
                            });
                            if (exists === false) {
                                $scope.availableGenres.push(genre);
                            }
                        });
                    });
                });
            }).error(function(error) {

            });
        };
    });

Es ist offensichtlich, dass wir jetzt sowohl genreFilter als auch availableGenres, die wir in unserem HTML referenziert haben, deklariert haben. Wir haben auch etwas JavaScript hinzugefügt, das unser availableGenres-Array füllen wird. Während wir in der Funktion init () die von der API zurückgegebenen JSON-Daten verarbeiten, führen wir jetzt eine zusätzliche Verarbeitung durch und fügen dem Array alle Genres hinzu, die noch nicht im availableGenres-Array enthalten sind. Dies füllt dann die Auswahleingabe mit allen verfügbaren Genres.

Wenn Sie index.html innerhalb Ihres Browsers öffnen, sollten Sie das Dropdown-Menü "Genre auswählen" sehen, wie unten dargestellt:

Wenn der Benutzer ein Genre auswählt, wird die Variable $ scope.genreFilter so aktualisiert, dass sie dem ausgewählten Wert entspricht.

Erstellen des benutzerdefinierten Filters

Da wir einen bestimmten Teil der TV-Show-Objekte filtern wollen, erstellen wir eine benutzerdefinierte Filterfunktion und wenden sie neben dem AngularJS-Filter innerhalb der ng-Wiederholung an.

Fügen Sie ganz unten in mainController.js nach dem gesamten anderen Code das folgende JavaScript hinzu:

    app.filter('isGenre', function() {
        return function(input, genre) {
            if (typeof genre == 'undefined' || genre == null) {
                return input;
            } else {
                var out = [];
                for (var a = 0; a < input.length; a++){
                    for (var b = 0; b < input[a].show.genres.length; b++){
                        if(input[a].show.genres[b] == genre) {
                            out.push(input[a]);
                        }
                    }
                }
                return out;
            }
        };
    });

Das obige JavaScript deklariert einen benutzerdefinierten Filter für unsere App namens isGenre. Die Funktion innerhalb des Filters benötigt zwei Parameter, Input und Genre. Die Eingabe wird standardmäßig zur Verfügung gestellt (was wir gleich sehen werden) und enthält alle Daten, die der ng-repeat verarbeitet. genre ist ein Wert, den wir übergeben müssen. All dieser Filter nimmt das angegebene Genre und prüft, ob jedes der TV-Show-Objekte innerhalb der Eingabe das angegebene Genre hat. Wenn ein Objekt das angegebene Genre hat, fügt es es dem Out-Array hinzu, das dann an die ng-Wiederholung zurückgegeben wird. Wenn das nicht ganz sinnvoll ist, keine Sorge! Es sollte in Kürze.

Anwenden des benutzerdefinierten Filters

Jetzt, wo wir unseren Kundenfilter zur Verfügung haben, können wir diesen zusätzlichen Filter zu unserer ng-Wiederholung hinzufügen. Ändern Sie Ihre ng-Wiederholung in index.html wie folgt:

1	<li ng-repeat="tvshow in results \| filter: filterText \| isGenre:genreFilter">

Dies kettet einfach einen anderen Filter auf den ng-Wiederholungsausgang. Jetzt wird die Ausgabe von beiden Filtern bearbeitet, bevor sie auf dem Bildschirm angezeigt wird. Wie Sie sehen können, haben wir unseren benutzerdefinierten Filter als isGenre spezifiziert: und dann übergeben wir die Scope-Variable genreFilter als Parameter, wodurch wir unseren Kundenfilter mit der Genre-Variable versehen, über die wir schon gesprochen haben. Denken Sie daran, dass AngularJS unserem Filter auch die Daten zur Verfügung stellt, die der ng-repeat als Eingabevariable verarbeitet.

OK, unser Filter für benutzerdefinierte Genres ist vollständig. Öffnen Sie index.html in einem Browser und testen Sie die neue Funktionalität. Mit diesem Filter kann ein Benutzer einfach Genres herausfiltern, an denen er nicht interessiert ist.

Aufruf von Bereichsfunktionen

Sie haben vielleicht bemerkt, dass jeder TV-Show-Eintrag auch das Genre selbst anzeigt. Für einige zusätzliche Funktionen erlauben wir dem Nutzer, auf diese Genres zu klicken, die dann automatisch den Genre-Filter für das Genre anwenden, auf das sie geklickt haben. Zuerst müssen wir eine Scope-Funktion erstellen, die der ng-click aufrufen kann. Fügen Sie den folgenden Code innerhalb von mainController auf mainController.js hinzu:

1	$scope.setGenreFilter = function(genre) {
2	$scope.genreFilter = genre;
3	}

Im obigen Code verwendet diese Funktion einen Genre-Wert und setzt dann $ scope.genreFilter auf den angegebenen Wert. Wenn dies geschieht, wird der Wert des Genre-Filter-Auswahlfelds aktualisiert und der Filter wird auf die ng-repeat-Ausgabe angewendet. Um diese Funktion zu aktivieren, wenn auf die Elemente des Genre-Bereichs geklickt wird, fügen Sie den Genre-Span-Elementen in index.html wie folgt einen ng-Klick hinzu:

1	<span class="label label-inverse genre" ng-repeat="genre in tvshow.show.genres" ng-click="setGenreFilter(genre)">{{genre}}</span>

Der ng-Klick ruft unsere zuvor erstellte setGenreFilter-Funktion auf und gibt ein Genre an. Öffne index.html und probiere es aus!

Benutzerdefinierte Bestellung mit AngularJS

Unsere TV-Show-Premiere-App sieht ziemlich gut aus, Nutzer können die angezeigten Ergebnisse mithilfe einer Reihe von intuitiven Filtern leicht verfeinern. Um diese Erfahrung zu verbessern, werden wir einige benutzerdefinierte Bestellfunktionen hinzufügen, so dass unsere Benutzer eine Reihe von Bestelloptionen auswählen können.

Fügen Sie den folgenden HTML-Code unter dem Genreauswahl-Dropdown hinzu:

    <label>Order by: </label>
    <select ng-model="orderField" ng-options="label for label in orderFields" class="input-medium"></select>
    <select ng-model="orderReverse"class="input-medium">
        <option value="true">Descending</option>
        <option value="false">Ascending</option>
    </select>

Mit diesem Code haben wir zwei weitere Drop-Downs. Eine, um auszuwählen, wie die Daten zu ordnen sind, und eine, um die Richtung zu wählen, in der die Daten geordnet werden sollen. Wir müssen jetzt eine Funktion in unserem Controller erstellen, um den Bestellungsvergleich durchzuführen. Fügen Sie das folgende JavaScript unter der Funktion setGenreFilter hinzu:

    $scope.customOrder = function(tvshow) {
        switch ($scope.orderField) {
            case "Air Date":
                return tvshow.episode.first_aired;
                break;
            case "Rating":
                return tvshow.episode.ratings.percentage;
                break;
        }
    };

Wir müssen jetzt eine Funktion in unserem Controller erstellen, um den Bestellungsvergleich durchzuführen. Fügen Sie das folgende JavaScript unter der Funktion setGenreFilter hinzu:

1	$scope.orderFields = ["Air Date", "Rating"];
2	$scope.orderDirections = ["Descending", "Ascending"];
3	$scope.orderField = "Air Date"; //Default order field
4	$scope.orderReverse = false;

Wir müssen auch einige zusätzliche Scope-Variablen deklarieren: Wenn Sie nun index.html in Ihrem Browser öffnen, sollten Sie die hinzugefügten Dropdown-Felder sehen, die mit bereits als Standard-Auftragsfeld ausgewähltem Luftdatum gefüllt sind. Dies wird in der folgenden Abbildung gezeigt:

Schließlich, wie wir es mit unseren anderen Filtern getan haben, müssen wir dies an unsere ng-Wiederholung anhängen und aktualisieren dies wie folgt:

1	<li ng-repeat="tvshow in results \| filter: filterText \| isGenre:genreFilter \| orderBy:customOrder:orderReverse">

Wir wenden nun zusätzlich zu den anderen Filtern eine Filterung unserer Daten an. Wir sagen der Reihenfolge nach, um unsere customOrder-Funktion zu verwenden, und wir übergeben auch unsere orderReverse-Variablen. Öffnen Sie index.html in einem Browser und sehen Sie die Bestellung in Aktion.

Fazit

Mit AngularJS konnten wir schnell und mit minimalem Aufwand eine detaillierte und funktionsfähige Webanwendung erstellen. Dank der integrierten Filterfunktionen von AngularJS und unserer eigenen benutzerdefinierten Codes können unsere Benutzer die TV-Show-Premieren problemlos filtern und durchsuchen.

Nach dem Lesen dieses Tutorials sollten Sie nun die folgenden Prinzipien verstehen und anwenden können:

Verwenden Sie ng-repeat, um Informationen auf dem Bildschirm anzuzeigen.
Binden an Eingaben, so dass Benutzer die ng-repeat-Ausgabe suchen und filtern können.
Chaining filtert bei ng-repeat, um mehrere Filterfunktionen durchzuführen.
Benutzerdefinierte Bestellung von Daten.
Verwenden Sie Ereignisse wie ng-click, um auf Benutzerinteraktionen zu reagieren.
Verwenden von ng-class zum bedingten Anwenden von Stilen auf Seitenelemente.

Zusammengefasst sollten die in diesem Tutorial behandelten Themen Ihnen eine solide Grundlage und Verständnis dafür bieten, was Sie beim Erstellen von Rich Web Applications in AngularJS erreichen können.