AngularJS hat sich weiterentwickelt und ist noch besser geworden. Jetzt Angular genannt, wurde es komplett in Richtung eines neuen Entwicklungsworkflows umgeschrieben. Überprüfen unser neues Angular 5 Tutorial und noch neuer Angular 6 Full-Stack-Tutorial mit Material und Firebase .

Was ist AngularJS?

AngularJS ist ein von Google entwickeltes JavaScript MVC-Framework, mit dem Sie gut strukturierte, leicht testbare und wartbare Front-End-Anwendungen erstellen können.

Und warum sollte ich es verwenden?

Wenn Sie AngularJS noch nicht ausprobiert haben, verpassen Sie es. Das Framework besteht aus einem eng integrierten Toolset, mit dem Sie gut strukturierte, umfangreiche clientseitige Anwendungen modular erstellen können - mit weniger Code und mehr Flexibilität.

AngularJS erweitert HTML durch Bereitstellung Richtlinien Dadurch wird Ihrem Markup Funktionalität hinzugefügt, und Sie können leistungsstarke dynamische Vorlagen erstellen. Sie können auch Ihre eigenen Anweisungen erstellen, wiederverwendbare Komponenten erstellen, die Ihre Anforderungen erfüllen, und die gesamte DOM-Manipulationslogik abstrahieren.

Es implementiert auch eine bidirektionale Datenbindung, die Ihr HTML (Ansichten) nahtlos mit Ihren JavaScript-Objekten (Modellen) verbindet. In einfachen Worten bedeutet dies, dass jedes Update Ihres Modells sofort in Ihrer Ansicht angezeigt wird, ohne dass eine DOM-Manipulation oder Ereignisbehandlung erforderlich ist (z. B. mit jQuery).

Angular bietet zusätzlich zu XHR Dienste, die Ihren Code erheblich vereinfachen und es Ihnen ermöglichen, API-Aufrufe in wiederverwendbare Dienste zu abstrahieren. Damit können Sie Ihr Modell und Ihre Geschäftslogik in das Front-End verschieben und Back-End-agnostische Web-Apps erstellen.

Schließlich liebe ich Angular wegen seiner Flexibilität in Bezug auf die Serverkommunikation. Wie die meisten JavaScript MVC-Frameworks können Sie mit jeder serverseitigen Technologie arbeiten, solange Ihre App über eine RESTful-Web-API bereitgestellt werden kann. Angular bietet aber auch Dienstleistungen an oben drauf von XHR, die Ihren Code dramatisch vereinfachen und es Ihnen ermöglichen, API-Aufrufe in wiederverwendbare Dienste zu abstrahieren. Infolgedessen können Sie Ihr Modell und Ihre Geschäftslogik in das Front-End verschieben und Back-End-agnostische Web-Apps erstellen. In diesem Beitrag machen wir genau das Schritt für Schritt.

Also, wo fange ich an?

Lassen Sie uns zunächst die Art der App festlegen, die wir erstellen möchten. In diesem Handbuch möchten wir lieber nicht zu viel Zeit im Back-End verbringen. Daher schreiben wir etwas, das auf Daten basiert, die im Internet leicht zugänglich sind - wie eine Sport-Feed-App!

Da ich zufällig ein großer Fan des Motorsports und der Formel 1 bin, werde ich einen Autosport-API-Service als Back-End verwenden. Zum Glück die Jungs bei Ergast sind so freundlich, eine kostenlose Motorsport-API bereitzustellen, die perfekt für uns ist.

Werfen Sie einen Blick auf das, was wir bauen werden Live-Demo . Um die Demo zu verschönern und einige Angular-Vorlagen zu zeigen, habe ich ein Bootstrap-Thema von angewendet WrapBootstrap Da es in diesem Artikel jedoch nicht um CSS geht, werde ich ihn nur von den Beispielen abstrahieren und weglassen.

Erste Schritte Tutorial

Lassen Sie uns unsere Beispiel-App mit einem Boilerplate starten. Ich empfehle das eckiger Samen Projekt, da es Ihnen nicht nur ein großartiges Skelett für das Bootstrapping bietet, sondern auch den Grundstein für Unit-Tests mit legt Karma und Jasmin (Wir werden in dieser Demo keine Tests durchführen, also lassen wir das Zeug erst einmal beiseite Teil 2 In diesem Tutorial finden Sie weitere Informationen zum Einrichten Ihres Projekts für Unit- und End-to-End-Tests.

EDIT (Mai 2014): Seit ich dieses Tutorial geschrieben habe, ist das eckiger Samen Das Projekt hat einige schwere Änderungen erfahren (einschließlich der Hinzufügung von Laube als Paketmanager). Wenn Sie Zweifel an der Bereitstellung des Projekts haben, werfen Sie einen kurzen Blick auf den ersten Abschnitt Referenzhandbuch . Im Teil 2 dieses Tutorials, Laube wird unter anderem ausführlicher behandelt.

Nachdem wir das Repository geklont und die Abhängigkeiten installiert haben, sieht das Skelett unserer App folgendermaßen aus:

Jetzt können wir mit dem Codieren beginnen. Beginnen wir mit der relevantesten Ansicht, während wir versuchen, einen Sport-Feed für eine Rennmeisterschaft zu erstellen: die Meisterschaftstabelle .

Da wir bereits eine Treiberliste in unserem Bereich definiert haben (bleiben Sie bei mir - wir werden dort ankommen) und CSS (aus Gründen der Lesbarkeit) ignorieren, sieht unser HTML möglicherweise folgendermaßen aus:

Drivers Championship Standings
{{$index + 1}}	{{driver.Driver.givenName}} {{driver.Driver.familyName}}	{{driver.Constructors[0].name}}	{{driver.points}}

Das erste, was Sie in dieser Vorlage bemerken werden, ist die Verwendung von Ausdrücken ('{{' und '}}'), um Variablenwerte zurückzugeben. In der AngularJS-Entwicklung Mit Ausdrücken können Sie einige Berechnungen ausführen, um einen gewünschten Wert zurückzugeben. Einige gültige Ausdrücke wären:

• {{ 1 + 1 }}
• { 946757880 }
• {{ user.name }}

Ausdrücke sind effektiv JavaScript-ähnliche Schnipsel. Obwohl Sie sehr leistungsfähig sind, sollten Sie keine Ausdrücke verwenden, um eine übergeordnete Logik zu implementieren. Dafür verwenden wir Direktiven.

Grundlegende Anweisungen verstehen

Das zweite, was Sie bemerken werden, ist das Vorhandensein von ng-attributes, das Sie in einem typischen Markup nicht sehen würden. Das sind Richtlinien.

Auf hoher Ebene sind Direktiven Markierungen (wie Attribute, Tags und Klassennamen), die AngularJS anweisen, ein bestimmtes Verhalten an ein DOM-Element anzuhängen (oder es zu transformieren, zu ersetzen usw.). Werfen wir einen Blick auf die, die wir bereits gesehen haben:

• Die ng-app Die Direktive ist für das Bootstrapping Ihrer App verantwortlich und definiert deren Umfang. In AngularJS können Sie mehrere Apps auf derselben Seite haben. Diese Anweisung definiert also, wo jede einzelne App beginnt und endet.

• Die ng-controller Die Direktive definiert, welcher Controller für Ihre Ansicht verantwortlich ist. In diesem Fall bezeichnen wir das driversController, das unsere Liste der Treiber (driversList) liefert.

• Die ng-repeat Die Direktive ist eine der am häufigsten verwendeten und dient zum Definieren Ihres Vorlagenbereichs beim Durchlaufen von Sammlungen. Im obigen Beispiel wird für jeden Treiber in driversList eine Zeile in der Tabelle repliziert.

Controller hinzufügen

Natürlich kann unsere Ansicht ohne einen Controller nicht verwendet werden. Fügen wir driversController hinzu an unsere controller.js:

angular.module('F1FeederApp.controllers', []). controller('driversController', function($scope) { $scope.driversList = [ { Driver: { givenName: 'Sebastian', familyName: 'Vettel' }, points: 322, nationality: 'German', Constructors: [ {name: 'Red Bull'} ] }, { Driver: { givenName: 'Fernando', familyName: 'Alonso' }, points: 207, nationality: 'Spanish', Constructors: [ {name: 'Ferrari'} ] } ]; });

Möglicherweise haben Sie das $scope bemerkt Variable, die wir als Parameter an die Steuerung übergeben. Die $scope Variable soll Ihren Controller und Ansichten verknüpfen. Insbesondere enthält es alle Daten, die in Ihrer Vorlage verwendet werden. Alles, was Sie hinzufügen (wie das driversList im obigen Beispiel), ist in Ihren Ansichten direkt verfügbar. Lassen Sie uns zunächst nur mit einem (statischen) Dummy-Datenarray arbeiten, das wir später durch unseren API-Service ersetzen werden.

Fügen Sie dies nun zu app.js hinzu:

angular.module('F1FeederApp', [ 'F1FeederApp.controllers' ]);

Mit dieser Codezeile initialisieren wir unsere App und registrieren die Module, von denen sie abhängt. Wir werden später auf diese Datei (app.js) zurückkommen.

Lassen Sie uns nun alles in index.html zusammenfassen:

F-1 Feeder

Drivers Championship Standings
{{$index + 1}}	{{driver.Driver.givenName}} {{driver.Driver.familyName}}	{{driver.Constructors[0].name}}	{{driver.points}}

Modulo kleinere Fehler, können Sie jetzt Ihre App starten und Ihre (statische) Liste der Treiber überprüfen.

Hinweis: Wenn Sie Hilfe beim Debuggen Ihrer App und beim Visualisieren Ihrer Modelle und Ihres Bereichs im Browser benötigen, empfehlen wir Ihnen, einen Blick auf das fantastische zu werfen Batarang Plugin für Chrome.

Laden von Daten vom Server

Da wir bereits wissen, wie die Daten unseres Controllers in unserer Ansicht angezeigt werden, ist es an der Zeit, Live-Daten von einem RESTful-Server abzurufen.

Um die Kommunikation mit HTTP-Servern zu erleichtern, stellt AngularJS $http bereit und $resource Dienstleistungen. Ersteres ist nur eine Schicht darüber XMLHttpRequest oder JSONP , während letzteres eine höhere Abstraktionsebene bietet. Wir verwenden $http.

Um unsere Server-API-Aufrufe vom Controller zu abstrahieren, erstellen wir einen eigenen benutzerdefinierten Dienst, der unsere Daten abruft und als Wrapper um $http fungiert indem Sie dies zu unserem services.js hinzufügen:

angular.module('F1FeederApp.services', []). factory('ergastAPIservice', function($http) { var ergastAPI = {}; ergastAPI.getDrivers = function() { return $http({ method: 'JSONP', url: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK' }); } return ergastAPI; });

Mit den ersten beiden Zeilen erstellen wir ein neues Modul (F1FeederApp.services) und registrieren einen Dienst innerhalb dieses Moduls (ergastAPIservice). Beachten Sie, dass wir $http übergeben als Parameter für diesen Dienst. Dies sagt Angulars Abhängigkeitsspritze Motor, den unser neuer Service benötigt (oder kommt drauf an ) die $http Bedienung.

In ähnlicher Weise müssen wir Angular anweisen, unser neues Modul in unsere App aufzunehmen. Registrieren wir es mit app.js und ersetzen unseren vorhandenen Code durch:

angular.module('F1FeederApp', [ 'F1FeederApp.controllers', 'F1FeederApp.services' ]);

Jetzt müssen wir nur noch unser controller.js optimieren ein bisschen, schließe ergastAPIservice ein als Abhängigkeit, und wir können loslegen:

angular.module('F1FeederApp.controllers', []). controller('driversController', function($scope, ergastAPIservice) { $scope.nameFilter = null; $scope.driversList = []; ergastAPIservice.getDrivers().success(function (response) { //Dig into the responde to get the relevant data $scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings; }); });

Laden Sie nun die App neu und überprüfen Sie das Ergebnis. Beachten Sie, dass wir keine Änderungen an unserer Vorlage vorgenommen haben, aber ein nameFilter hinzugefügt haben variabel zu unserem Umfang. Lassen Sie uns diese Variable verwenden.

Filter

Groß! Wir haben eine funktionale Steuerung. Es wird jedoch nur eine Liste der Treiber angezeigt. Fügen wir einige Funktionen hinzu, indem wir eine einfache Textsucheingabe implementieren, die unsere Liste filtert. Fügen wir unserem index.html direkt unter dem Tag die folgende Zeile hinzu:

ng-model

Wir verwenden jetzt das $scope.nameFilter Richtlinie. Diese Direktive bindet unser Textfeld an ng-repeat variabel und stellt sicher, dass sein Wert immer mit dem Eingabewert auf dem neuesten Stand ist. Besuchen Sie jetzt noch einmal index.html und nehmen Sie eine kleine Anpassung an der Zeile vor, die enthält Richtlinie:

ng-repeat

Diese Zeile sagt driversList dass vor der Ausgabe der Daten die nameFilter Das Array muss nach dem in $scope.nameFilter gespeicherten Wert gefiltert werden.

Zu diesem Zeitpunkt beginnt die bidirektionale Datenbindung: Jedes Mal, wenn ein Wert in das Suchfeld eingegeben wird, stellt Angular sofort sicher, dass nameFilter dass wir damit verbunden haben, wird mit dem neuen Wert aktualisiert. Da die Bindung in beide Richtungen funktioniert, ist der Moment der ng-repeat Wenn der Wert aktualisiert wird, erhält die ihm zugeordnete zweite Anweisung (d. h. Driver.givenName) ebenfalls den neuen Wert und die Ansicht wird sofort aktualisiert.

Laden Sie die App neu und überprüfen Sie die Suchleiste.

Beachten Sie, dass dieser Filter bei allen Attributen des Modells nach dem Schlüsselwort sucht, einschließlich derjenigen, die wir nicht verwenden. Nehmen wir an, wir möchten nur nach Driver.familyName filtern und driversController: Zuerst fügen wir $scope.driversList = []; direkt unter $scope.searchFilter = function (driver) ; hinzu Linie:

index.html

Zurück zu ng-repeat aktualisieren wir nun die Zeile, die enthält Richtlinie:

$routeProvider

Laden Sie die App noch einmal neu und jetzt haben wir eine Suche nach Namen.

Routen

Unser nächstes Ziel ist es, eine Seite mit Fahrerdetails zu erstellen, auf der wir auf jeden Fahrer klicken und seine Karrieredetails anzeigen können.

Lassen Sie uns zunächst app.js einschließen Service (in app.js), der uns hilft, mit diesen vielfältigen umzugehen Anwendungswege . Dann fügen wir zwei solche Routen hinzu: eine für die Meisterschaftstabelle und eine für die Fahrerdetails. Hier ist unser neues angular.module('F1FeederApp', [ 'F1FeederApp.services', 'F1FeederApp.controllers', 'ngRoute' ]). config(['$routeProvider', function($routeProvider) { $routeProvider. when('/drivers', {templateUrl: 'partials/drivers.html', controller: 'driversController'}). when('/drivers/:id', {templateUrl: 'partials/driver.html', controller: 'driverController'}). otherwise({redirectTo: '/drivers'}); }]); :

http://domain/#/drivers

Navigieren Sie mit dieser Änderung zu driversController lädt das partials/drivers.html und suchen Sie nach der Teilansicht, die in ng-view gerendert werden soll. Aber warte! Wir haben noch keine Teilansichten, oder? Wir müssen diese auch erstellen.

Teilansichten

Mit AngularJS können Sie Ihre Routen an bestimmte Controller und Ansichten binden.

Aber zuerst müssen wir Angular mitteilen, wo diese Teilansichten gerendert werden sollen. Dafür verwenden wir index.html Richtlinie, Änderung unserer F-1 Feeder um Folgendes zu spiegeln:

partials/drivers.html

Wenn wir jetzt durch unsere App-Routen navigieren, lädt Angular die zugehörige Ansicht und rendert sie anstelle des Tags. Wir müssen lediglich eine Datei mit dem Namen

Drivers Championship Standings
{{$index + 1}}	{{driver.Driver.givenName}} {{driver.Driver.familyName}}	{{driver.Constructors[0].name}}	{{driver.points}}

erstellen und legen Sie dort unsere Meisterschaftstabelle HTML. Wir werden diese Möglichkeit auch nutzen, um den Fahrernamen mit unserer Route mit Fahrerdetails zu verknüpfen:

services.js

Lassen Sie uns abschließend entscheiden, was auf der Detailseite angezeigt werden soll. Wie wäre es mit einer Zusammenfassung aller relevanten Fakten über den Fahrer (z. B. Geburt, Nationalität) zusammen mit einer Tabelle, die seine / ihre jüngsten Ergebnisse enthält? Dazu fügen wir angular.module('F1FeederApp.services', []) .factory('ergastAPIservice', function($http) { var ergastAPI = {}; ergastAPI.getDrivers = function() { return $http({ method: 'JSONP', url: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK' }); } ergastAPI.getDriverDetails = function(id) { return $http({ method: 'JSONP', url: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/driverStandings.json?callback=JSON_CALLBACK' }); } ergastAPI.getDriverRaces = function(id) { return $http({ method: 'JSONP', url: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/results.json?callback=JSON_CALLBACK' }); } return ergastAPI; }); hinzu:

controllers.js

Dieses Mal stellen wir dem Dienst die Fahrer-ID zur Verfügung, damit wir die Informationen abrufen können, die nur für einen bestimmten Fahrer relevant sind. Jetzt ändern wir angular.module('F1FeederApp.controllers', []). /* Drivers controller */ controller('driversController', function($scope, ergastAPIservice) { $scope.nameFilter = null; $scope.driversList = []; $scope.searchFilter = function (driver) re.test(driver.Driver.familyName); ; ergastAPIservice.getDrivers().success(function (response) { //Digging into the response to get the relevant data $scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings; }); }). /* Driver controller */ controller('driverController', function($scope, $routeParams, ergastAPIservice) { $scope.id = $routeParams.id; $scope.races = []; $scope.driver = null; ergastAPIservice.getDriverDetails($scope.id).success(function (response) { $scope.driver = response.MRData.StandingsTable.StandingsLists[0].DriverStandings[0]; }); ergastAPIservice.getDriverRaces($scope.id).success(function (response) { $scope.races = response.MRData.RaceTable.Races; }); }); :

$routeParams

Das Wichtigste dabei ist, dass wir gerade das :id injiziert haben Service in der Treibersteuerung. Mit diesem Dienst können wir über $routeParams.id auf unsere URL-Parameter (in diesem Fall für partials/driver.html) zugreifen.

Nachdem wir unsere Daten im Geltungsbereich haben, benötigen wir nur noch die verbleibende Teilansicht. Erstellen wir eine Datei mit dem Namen <- Back to drivers list
{{driver.Driver.givenName}} {{driver.Driver.familyName}} Country: {{driver.Driver.nationality}}
Team: {{driver.Constructors[0].name}}
Birth: {{driver.Driver.dateOfBirth}}
Biography

Formula 1 2013 Results
Round	Grand Prix	Team	Grid	Race
{{race.round}}	{{race.raceName}}	{{race.Results[0].Constructor.name}}	{{race.Results[0].grid}}	{{race.Results[0].position}}

und hinzufügen:

ng-show

Beachten Sie, dass wir jetzt true setzen Richtlinie zur guten Verwendung. Diese Anweisung zeigt das HTML-Element nur an, wenn der angegebene Ausdruck false ist (d. h. weder null noch index.html). In diesem Fall wird der Avatar erst angezeigt, wenn das Treiberobjekt vom Controller in den Bereich geladen wurde.

Feinschliff

Fügen Sie eine Reihe von CSS hinzu und rendern Sie Ihre Seite. Sie sollten am Ende so etwas haben:

Sie können jetzt Ihre App starten und sicherstellen, dass beide Routen wie gewünscht funktionieren. Sie können

|_+_|

auch ein statisches Menü hinzufügen um die Navigationsfunktionen des Benutzers zu verbessern. Die Möglichkeiten sind endlos.

EDIT (Mai 2014): Ich habe viele Anfragen nach einer herunterladbaren Version des Codes erhalten, den wir in diesem Tutorial erstellen. Ich habe mich daher entschlossen, es zu veröffentlichen Hier (ohne CSS). Das tue ich jedoch wirklich nicht Empfehlen Sie das Herunterladen, da dieses Handbuch jeden einzelnen Schritt enthält, den Sie zum Erstellen derselben Anwendung mit Ihren eigenen Händen benötigen. Dies ist eine viel nützlichere und effektivere Lernübung.

Fazit

An dieser Stelle im Tutorial haben wir alles behandelt, was Sie zum Schreiben einer einfachen App benötigen (z. B. eines Formel-1-Feeders). Jede der verbleibenden Seiten in der Live-Demo (z. B. Konstrukteur-Meisterschaftstabelle, Teamdetails, Kalender) weist dieselbe Grundstruktur und dieselben Konzepte auf, die wir hier überprüft haben.

Denken Sie zum Schluss daran, dass Angular ein sehr leistungsfähiges Framework ist und wir die Oberfläche in Bezug auf alles, was es zu bieten hat, kaum zerkratzt haben. Im Teil 2 In diesem Tutorial geben wir Beispiele dafür, warum Angular sich von seinen Peer-Front-End-MVC-Frameworks abhebt: Testbarkeit. Wir werden den Prozess des Schreibens und Ausführens von Komponententests mit überprüfen Karma , kontinuierliche Integration mit erreichen Yeomen , Boden , und Laube und andere Stärken dieses fantastischen Front-End-Frameworks.

Grundlagen verstehen

Was ist AngularJS?

AngularJS ist ein von Google entwickeltes JavaScript-MVC-Framework, mit dem Sie gut strukturierte, leicht testbare und wartbare Front-End-Anwendungen erstellen können.

Warum AngularJS?

AngularJS erweitert HTML um Anweisungen, die Ihrem Markup Funktionen hinzufügen und es Ihnen ermöglichen, leistungsstarke dynamische Vorlagen zu erstellen. Sie können auch Ihre eigenen Anweisungen erstellen, wiederverwendbare Komponenten erstellen, die Ihre Anforderungen erfüllen, und die gesamte DOM-Manipulationslogik abstrahieren.