AngularJS-Demoprojekt: So erstellen Sie eine App mit AngularJS

Veröffentlicht: 2020-09-10

Wenn Sie Full-Stack-Entwicklung lernen, müssen Sie sich der Frage gestellt haben: „Wie führt man ein AngularJS-Projekt aus?“ Machen Sie sich keine Sorgen, denn in diesem Artikel teilen wir ein detailliertes Tutorial zum Erstellen einer App mit AngularJS.

Nach Abschluss dieses Projekts sind Sie mit den Grundlagen von AngularJS und seinen Implementierungen vertraut und verfügen über eine funktionierende App, die Sie Ihren Freunden zeigen können. Sie können dieses Tutorial mit einem Lesezeichen versehen, da wir Schritte für verschiedene Entwicklungsstadien zusammen mit dem Code aufgelistet haben.

Beachten Sie, dass Sie den Code verstehen sollten, bevor Sie ihn implementieren. Aus diesem Grund empfehlen wir nicht, den Code zu kopieren und einzufügen. Wenn Sie jedoch wissen, wie jede Codezeile funktioniert, können Sie sie frei kopieren und einfügen. Wenn Sie verstehen, wie der Code funktioniert, können Sie am effizientesten lernen.

Inhaltsverzeichnis

Was ist AngularJS? Eine kurze Einführung

Bevor wir über AngularJS-Projekte sprechen, lassen Sie uns zuerst ein wenig über die Technologie sprechen. Mit AngularJS können Benutzer HTML für Anwendungen erweitern. Es ist ein Front-End-Web-Framework, das auf JavaScript basiert. HTML verzögert sich in dynamischen Ansichten für Web-Apps und Angular löst dieses Problem.

AngularJS hat eine blühende Community von Benutzern und Entwicklern, in der Sie Fragen stellen und Ihre Verwirrung beseitigen können. Angular bietet Benutzern Datenbindung, Controller und viele andere leistungsstarke Tools, um das Front-End einer Webseite zu verbessern. Sie werden viele Konzepte in unserem Projekt entdecken, während wir sie in unserem Tutorial implementieren.

Voraussetzungen für AngularJS-Projekte für Anfänger

Bevor Sie mit der Arbeit an AngularJS-Projekten beginnen, sollten Sie mit den folgenden Konzepten vertraut sein:

HTML

HTML steht für HyperText Markup Language. Es ist für jede Webseitenstruktur verantwortlich und ist der erste Baustein für die Webentwicklung. Sie sollten mit der HTML-Syntax, ihren Elementen und Implementierungen vertraut sein, bevor Sie mit der Arbeit an diesem Projekt beginnen.

CSS

CSS steht für Cascading Style Sheets und ist die primäre Sprache zum Hinzufügen von Visuals zu einer Webseite. Es ist genauso wichtig wie HTML, weil es die Webseite besser aussehen lässt und zugänglicher wird. Während HTML für die erste Phase unseres AngularJS-Projekts erforderlich ist, müssen Sie später CSS hinzufügen. Deshalb sollten Sie sich damit vertraut machen, bevor Sie mit der Arbeit an AngularJS-Projekten für Anfänger beginnen.

JavaScript

AngularJS basiert auf JavaScript. Wenn Sie mit der JS-Syntax, dem Code und seinen Implementierungen vertraut sind, werden auch viele technische Aspekte von AngularJS für Sie vereinfacht. Stellen Sie sicher, dass Sie die Grundlagen von JS gut verstehen, bevor Sie mit der Arbeit an dieser Aufgabe beginnen.

Abgesehen von diesen Voraussetzungen sollten Sie sich auch mit den Grundlagen von AngularJS auskennen. Dieses Projekt setzt voraus, dass Sie über ausreichende Kenntnisse in HTML, CSS, JS und AngularJS verfügen. Nun, da wir das aus dem Weg geräumt haben, fangen wir an.

So führen Sie das AngularJS-Projekt aus – Tutorial

In diesem Tutorial erstellen wir eine AngularJS-Sport-Feed-App. Eine Sport-Feed-App zeigt Ihnen Statistiken zu einem Spiel oder Ereignis. Sie können beispielsweise eine App erstellen, die die Scorecard der Spiele oder eine IPL-Team-Score-Tabelle anzeigt. Wir haben uns entschieden, an einer Sport-Feed-App zu arbeiten, weil sie nicht viel Back-End-Entwicklung erfordert.

Der HTML-Code

Wir beginnen zunächst damit, den HTML-Code für unsere Anwendung zu erstellen. Hier ist die Vorlage für unseren HTML-Code.

<Kopf>

<tr><th colspan=”4″>Fahrer-Meisterschaftsstand</th></tr>

</thead>

<tbody>

<td>{{$index + 1}}</td>

<td>

{{driver.Driver.givenName}} {{driver.Driver.familyName}}

</td>

<td>{{Treiber.Konstruktoren[0].Name}}</td>

<td>{{Fahrer.Punkte}}</td>

</tr>

</tbody>

</table>

</body>

Sie müssen {{ und }} bemerkt haben. Sie werden als Ausdrücke bezeichnet und ermöglichen es Ihnen, Rechenaufgaben auszuführen, um den erforderlichen Wert zurückzugeben. Hier sind zum Beispiel einige gültige Ausdrücke:

{{ 2 + 2 }}
{{ mein Name }}

Man kann sagen, dass es sich um JavaScript-Schnipsel handelt. Es wäre jedoch am besten, wenn Sie keine Ausdrücke zum Implementieren von High-Level-Logik verwenden würden. Dazu sollten Sie Direktiven verwenden. Ausdrücke sind nur für die Low-Level-Logikimplementierung geeignet. Die primäre Aufgabe von Ausdrücken besteht darin, die erforderlichen Anwendungsdaten an das HTML zu binden.

Lernen: HTML-Entwicklergehalt in Indien: Für Studienanfänger und Erfahrene

Die Richtlinien in unserem Kodex

Eines der wichtigsten Konzepte, die Sie bei der Arbeit an AngularJS-Projekten entdecken würden, sind Direktiven. Eine Direktive ist eine Markierung auf einem DOM-Element, um AngularJS mitzuteilen, dass es dem einzelnen Element ein bestimmtes Verhalten zuweisen muss. Die Direktive kann Angular anweisen, verschiedene Aufgaben auszuführen, z. B. das DOM-Element und seine untergeordneten Elemente umzuwandeln und es durch ein anderes DOM-Element zu ersetzen. Die meisten mächtigen Direktiven beginnen mit „ng-“, wobei „ng“ für Angular steht.

Hier sind die verschiedenen Direktiven, die wir in unserem obigen Code verwendet haben, zusammen mit ihren Anwendungen:

ng-app

Diese Direktive bootet die App und definiert ihren Geltungsbereich. Dies ist eine wesentliche Anweisung, da Sie in AngularJS mehrere Apps haben können, und sie teilt dem Programm die Start- und Endpunkte jeder App mit.

ng-Controller

Diese Anweisung definiert, welcher Controller die Macht über die Ansicht des Benutzers hat. Wir haben in dieser Hinsicht den driversController bezeichnet, der die Liste der Fahrer (driversList) in unserer App bereitstellt.

ng-Wiederholung

Diese Direktive ist eine der am häufigsten verwendeten unter Angular-Entwicklern. Es definiert den Vorlagenbereich während des Durchlaufens von Sammlungen.

Angular hat viele Direktiven, und wenn Sie an mehr AngularJS-Projekten für Anfänger arbeiten, werden Sie mehr Anwendungen dafür entdecken. Aus diesem Grund empfehlen wir, an verschiedenen Projekten zu arbeiten und gleichzeitig eine bestimmte Fähigkeit zu erlernen.

Die Controller

Die Ansicht wäre nutzlos, es sei denn, wir fügen einen Controller hinzu. Also fügen wir hier den driversController hinzu:

angle.module('F1FeederApp.controller', []).

controller('driversController', function($scope) {

$scope.driversList = [

{

Fahrer: {

gegebenerName: 'Sebastian',

Familienname: 'Vettel'

Punkte: 322,

Nationalität: Deutsch",

Konstruktoren: [

{Name: "Roter Bulle"}

]

{

Fahrer: {

gegebenerName: 'Fernando',

Familienname: 'Alonso'

Punkte: 207,

Nationalität: „Spanisch“,

Konstruktoren: [

{Name: "Ferrari"}

]

}

];

});

Eine einzigartige Variable, die Ihnen vielleicht aufgefallen ist, ist $scope. Wir übergeben diese Variable als Parameter an den Controller, da sie den Controller mit Views verknüpfen würde. $scope enthält alle Daten, die in der Vorlage verwendet werden sollen, und alle Daten, die Sie hinzufügen, sind in den Ansichten zugänglich.

Wir fügen vorerst ein statisches Datenarray hinzu und ersetzen es später, wenn wir Fortschritte in unserem Projekt machen.

Fügen wir zuerst den Controller zur app.js hinzu, die so aussehen sollte:

angle.module('F1FeederApp', [

'F1FeederApp.controllers'

]);

Diese kleine Codezeile hat unsere App initialisiert und die Module registriert, von denen unsere App abhängt. Wir müssen nun all diese Informationen zu unserer index.html-Datei hinzufügen:

<!DOCTYPE html>

<html>

<Kopf>

<title>F-1 Feeder</title>

</head>

<Kopf>

<tr><th colspan=”4″>Fahrer-Meisterschaftsstand</th></tr>

</thead>

<tbody>

<td>{{$index + 1}}</td>

<td>

{{driver.Driver.givenName}} {{driver.Driver.familyName}}

</td>

<td>{{Treiber.Konstruktoren[0].Name}}</td>

<td>{{Fahrer.Punkte}}</td>

</tr>

</tbody>

</table>

</body>

</html>

In diesem Stadium können Sie Ihre App starten. Beachten Sie jedoch, dass Sie die App debuggen müssen. Ein entscheidender Schritt beim Erlernen der Ausführung des AngularJS-Projekts ist das Debuggen einer App.

Daten vom Server laden

Jetzt fügen wir unserer App die Funktionalität zum Abrufen von Live-Daten von einem RESTful-Server hinzu. Um mit HTTP-Servern zu kommunizieren, verfügt AngularjS über zwei Dienste, $http und $resource. In unserem Code verwenden wir $http, da es Abstraktion auf hoher Ebene bietet. Wir erstellen einen benutzerdefinierten Dienst, um unsere Server-API-Aufrufe zu abstrahieren. Es ruft die Daten ab und ist ein Wrapper um $http. Also fügen wir unserer services.js-Datei den folgenden Code hinzu:

angle.module('F1FeederApp.services', []).

factory('ergastAPIservice', function($http) {

var ergastAPI = {};

ergastAPI.getDrivers = function() {

gib $http({ zurück

Methode: 'JSONP',

URL: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'

});

}

Rückgabe ergastAPI;

});

Wir haben zuerst ein neues Modul namens F1FeederApp.services erstellt und einen Dienst ergastAPIservice hinzugefügt. Beachten Sie, dass wir $http als Parameter an den Dienst übergeben haben. Wir werden Angular auch anweisen, unser Modul in die App hinzuzufügen. Dazu müssen wir den Code in app.js durch Folgendes ersetzen:

angle.module('F1FeederApp', [

'F1FeederApp.controller',

'F1FeederApp.services'

]);

Wir müssen controller.js ein wenig modifizieren und ergastAPIservice in Form einer Abhängigkeit hinzufügen, und dann ist dieser Schritt abgeschlossen:

angle.module('F1FeederApp.controller', []).

controller('driversController', function($scope, ergastAPIservice) {

$scope.nameFilter = null;

$scope.driversList = [];

ergastAPIservice.getDrivers().success(Funktion (Antwort) {

//Stöbern Sie in der Antwort, um die relevanten Daten zu erhalten

$scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;

});

Um zu überprüfen, ob der Code funktioniert oder nicht, laden Sie Ihre Anwendung neu. Sie werden feststellen, dass wir die Vorlage nicht geändert haben, sondern nur die nameFilter-Variable eingefügt haben. Im nächsten Abschnitt verwenden wir diese Variable:

Filter anwenden

Bisher haben wir unserer App einen funktionalen Controller hinzugefügt. Jetzt fügen wir weitere Funktionen hinzu, indem wir eine Eingabeleiste für die Textsuche hinzufügen. Sie können den folgenden Code in Ihre index.html unterhalb des <body>-Tags einfügen:

Wir verwenden hier die Direktive „ng-model“. Es bindet das Textfeld an die Variable „$scope.nameFilter“. Die Direktive stellt sicher, dass unser Variablenwert entsprechend dem Eingabewert aktualisiert wird. Sagen wir „ng-repeat“, dass es das Array „driversList“ nach dem Wert filtern muss, der in „nameFilter“ vorhanden ist, bevor es die Daten ausgibt:

Wir führen hier zwei verschiedene Datenbindungen durch. Erstens, wenn Sie einen Wert in das Suchfeld eingeben, stellt Angular sicher, dass die Variable $scope.nameFilter entsprechend aktualisiert wird. Zweitens, sobald nameFilter ng-repeat aktualisiert, erhält die zweite daran angehängte Direktive einen neuen Wert und eine Aktualisierung.

Angenommen, wir möchten nur mithilfe von Driver.familyName und Driver.givenName filtern. Wir müssen driversController unterhalb von $scope.driversList = [] wie folgt hinzufügen:

$scope.searchFilter = Funktion (Treiber) {

var keyword = new RegExp($scope.nameFilter, 'i');

return !$scope.nameFilter || Schlüsselwort.test(Treiber.Treiber.Vorgabename) || keyword.test (Fahrer.Fahrer.Familienname);

};

Um diesen Vorgang abzuschließen, müssen wir nur die Zeile mit der Direktive ng-repeat aktualisieren:

Sie können die App neu laden, um zu sehen, ob der Code funktioniert oder nicht. Unsere App hat jetzt eine Suchfunktion. Als Nächstes fügen wir Routen hinzu.

Routen hinzufügen

Wir müssen eine Seite erstellen, die die Details unserer Fahrer zeigt. Die Seite sollte es einem Benutzer ermöglichen, auf einen Fahrer zu klicken und seine oder ihre Karriereinformationen anzuzeigen. Wir beginnen mit dem Hinzufügen des Dienstes $routeProvider in der Datei app.js. Es hilft Ihnen, die verschiedenen Bewerbungswege richtig zu handhaben.

Jetzt fügen wir eine Route für Fahrerinformationen und eine weitere für die Meisterschaftsanzeigetafel hinzu. Nun sieht unsere app.js-Datei so aus:

angle.module('F1FeederApp', [

'F1FeederApp.services',

'F1FeederApp.controller',

'ngRoute'

]).

config(['$routeProvider', function($routeProvider) {

$routeProvider.

when("/drivers", {templateUrl: "partials/drivers.html", controller: "driversController"}).

when("/drivers/:id", {templateUrl: "partials/driver.html", controller: "driverController"}).

andernfalls ({redirectTo: '/drivers'});

}]);

Wenn ein Benutzer nach dem Hinzufügen dieses Codes zu „https://domain/#drivers“ navigiert, wird der „driversController“ geladen und die Teilansicht gesucht. Wenn Sie diesem Tutorial bisher gefolgt sind, müssen Sie eine Sache bemerkt haben. Wir haben die Teilansichten nicht hinzugefügt! Unser nächster Schritt wäre also, dasselbe zu unserer Anwendung hinzuzufügen:

Teilansichten hinzufügen

Ein großartiges Feature von AngularJS ist, dass Sie verschiedene Routen an verschiedene Ansichten und Controller binden können. Damit AngularJS diese Aktion jedoch ausführen kann, sollte es wissen, wo es diese Teilansichten rendern kann.

Wir verwenden also die ng-view-Direktive und fügen sie unserer index.html-Datei hinzu:

<!DOCTYPE html>

<html>

<Kopf>

<title>F-1 Feeder</title>

</head>

<ng-view></ng-view>

</body>

</html>

Aufgrund dieser Implementierung lädt Angular beim Navigieren durch eine App-Route die relevante Ansicht und rendert sie. Es würde den Ort zum Rendern durch das Tag <ng-view> bestimmen. Jetzt müssen wir nur noch eine Datei namens partials/drivers.html erstellen und den HTML-Code der Meisterschaftstabelle dort ablegen. Wenn wir schon dabei sind, verknüpfen wir auch unsere Fahrerinformationsroute mit den Namen der Fahrer:

<Kopf>

<tr><th colspan=”4″>Fahrer-Meisterschaftsstand</th></tr>

</thead>

<tbody>

<td>{{$index + 1}}</td>

<td>

{{driver.Driver.givenName}} {{driver.Driver.familyName}}

</a>

</td>

<td>{{Treiber.Konstruktoren[0].Name}}</td>

<td>{{Fahrer.Punkte}}</td>

</tr>

</tbody>

</table>

Wir erreichen die Endphase der Entwicklung. Unsere Fahrerinformationsseite benötigt Daten, also werden wir sie hinzufügen. Dazu müssten wir den folgenden Code in services.js schreiben:

angle.module('F1FeederApp.services', [])

.factory('ergastAPIservice', function($http) {

var ergastAPI = {};

ergastAPI.getDrivers = function() {

gib $http({ zurück

Methode: 'JSONP',

URL: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'

});

}

ergastAPI.getDriverDetails = function(id) {

gib $http({ zurück

Methode: 'JSONP',

URL: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/driverStandings.json?callback=JSON_CALLBACK'

});

}

ergastAPI.getDriverRaces = function(id) {

gib $http({ zurück

Methode: 'JSONP',

URL: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/results.json?callback=JSON_CALLBACK'

});

}

Rückgabe ergastAPI;

});

Wir werden jetzt controllers.js bearbeiten. Unser Ziel ist es, die ID jedes Fahrers mit dem Dienst zu verbinden, damit unser Informationsabruf für den angeforderten Fahrer spezifisch bleibt.

angle.module('F1FeederApp.controller', []).

/* Treibercontroller */

controller('driversController', function($scope, ergastAPIservice) {

$scope.nameFilter = null;

$scope.driversList = [];

$scope.searchFilter = Funktion (Treiber) {

var re = new RegExp($scope.nameFilter, 'i');

return !$scope.nameFilter || re.test(driver.Driver.vorgegebenerName) || re.test (Fahrer.Fahrer.Familienname);

};

ergastAPIservice.getDrivers().success(Funktion (Antwort) {

//In der Antwort graben, um die relevanten Daten zu erhalten

$scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;

});

}).

/* Treibercontroller */

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.Rennen;

});

Beachten Sie, dass wir den Dienst $routePrams im Treiber-Controller hinzugefügt haben. Es würde Ihnen den Zugriff auf URL-Parameter ermöglichen und ist ein entscheidender Schritt.

Jetzt erstellen wir eine Datei namens partials/driver.html, da wir alle notwendigen Daten hinzugefügt haben und uns nur noch um den Rest der Teilansicht kümmern müssen. Wir haben die Direktive ng-show im folgenden Code verwendet. Die Direktive stellt sicher, dass unsere App nur das erforderliche HTML-Element anzeigt, wenn der Ausdruck wahr ist. Das heißt, selbst wenn die Bedingung null ist, würde die App das HTML-Element nicht anzeigen. Hier ist der Code:

<Abschnitts-ID=“main“>

</div>

Land: {{Fahrer.Fahrer.Nationalität}} <br/>

Team: {{driver.Constructors[0].name}}<br/>

Geburt: {{driver.Driver.dateOfBirth}}<br/>

<a href=“{{driver.Driver.url}}“ target=“_blank“>Biografie</a>

</div>

</nav>

<Kopf>

<tr><th colspan=”5″>Ergebnisse der Formel 1 2013</th></tr>

</thead>

<tbody>

<tr>

<td>Runde</td> <td>Grand Prix</td> <td>Team</td> <td>Grid</td> <td>Rennen</td>

</tr>

<td>{{race.round}}</td>

<td><img src=”img/flags/{{race.Circuit.Location.country}}.png” />{{race.raceName}}</td>

<td>{{race.Results[0].Constructor.name}}</td>

<td>{{race.Results[0].grid}}</td>

<td>{{race.Results[0].position}}</td>

</tr>

</tbody>

</table>

</div>

</Abschnitt>

Letzte Schritte (CSS)

Inzwischen haben Sie eine gut funktionierende Sport-Feeder-App. Wie wir bereits besprochen haben, konzentriert sich CSS darauf, die Webseite attraktiv aussehen zu lassen. In diesem Schritt haben Sie also die Unabhängigkeit, CSS zu Ihrer App hinzuzufügen und ihr Erscheinungsbild zu verbessern. Sie können Schriftarten wechseln, den Hintergrund ändern, andere Bilder hinzufügen oder einige Übergänge animieren, um die Benutzeroberfläche der Anwendung zu verbessern. Die technischen Teile unseres Projekts sind abgeschlossen.

Checkout: Full-Stack-Entwicklergehalt in Indien

Erfahren Sie mehr über Entwicklung

Sie haben jetzt eine AngularJS-App erstellt! Wir hoffen, dass Ihnen dieses Tutorial gefallen hat. Erinnere dich daran

Angular ist ein recht robustes Framework mit vielen Funktionalitäten. Die in diesem Artikel waren sehr wenige im Vergleich zu den Dingen, zu denen Angular in der Lage ist. Wenn Sie an fortgeschritteneren AngularJS-Projekten arbeiten, werden Sie mehr von seinen leistungsstarken Funktionen entdecken.

Wenn Sie mehr über Full-Stack-Entwicklung erfahren möchten, empfehlen wir Ihnen, unseren Blog zu besuchen. Hier finden Sie zahlreiche Ressourcen zu den verschiedenen Aspekten dieses Bereichs. Hier einige zum Weiterlesen:

Die 10 wichtigsten Fähigkeiten, um ein Full-Stack-Entwickler zu werden
Warum ein Full-Stack-Entwickler werden?
Wie man ein Full-Stack-Entwickler wird Serie

Andererseits können Sie auch einen Full-Stack-Entwicklungskurs belegen und durch Projekte, Videos und Aufgaben von Branchenexperten lernen.

Wenn Sie mehr über Full-Stack-Entwicklung erfahren möchten, sehen Sie sich das PG-Diplom in Full-Stack-Softwareentwicklung von upGrad & IIIT-B an, das für Berufstätige konzipiert ist und mehr als 500 Stunden strenge Schulungen, mehr als 9 Projekte und Aufgaben bietet , IIIT-B-Alumni-Status, praktische praktische Abschlussprojekte und Arbeitsunterstützung bei Top-Unternehmen.

Landen Sie in Ihrem Traumjob

UPGRAD UND IIIT-BANGALORES PG-DIPLOM IN SOFTWAREENTWICKLUNG

Melden Sie sich noch heute an