Entwickeln Sie eine umfangreiche Single-Page-Anwendung (SPA) mit AngularJS

Einleitung

(SPA) Was steckt in einem solchen Namen? Wenn Sie ein Fan der klassischen Seinfeld-TV-Show sind, müssen Sie den Namen Donna Chang kennen. Jerry traf sich mit Donna. Donna war eigentlich keine Chinesin, aber weil sie über ihren inhärenten Eindruck von China sprach, beispielsweise über ihr Interesse an Akupunktur, und versehentlich ein Wort mit chinesischem Akzent aussprach, kürzte sie das Ende ihres Namens auf Chang Donna ab telefonierte mit Georges Mutter und gab ihr einige Ratschläge (indem er Konfuzius zitierte). Als George Donna seinen Eltern vorstellte, erkannte Georges Mutter, dass Donna keine Chinesin war, also akzeptierte sie Donnas Vorschlag nicht.

Single Page Reference (SPA) ist definiert als ein Zweck, der eine einzelne Webseite bereitstellt Anwendung oder Website mit einem reibungslosen Benutzererlebnis, das dem einer Desktop-Anwendung ähnelt. In einer SPA wird der gesamte erforderliche Code – HTML, JavaScript und CSS – abgerufen, wenn die einzelne Seite geladen wird oder wenn die zugehörigen Ressourcen dynamisch geladen werden und bei Bedarf zu Seiten hinzugefügt, oft als Reaktion auf Benutzeraktionen. Obwohl moderne Webtechnologien (wie die in HTML5 eingeführten) unabhängige logische Seiten in der Anwendung bereitstellen, um sich gegenseitig zu kennen und zu navigieren, ohne dass die Seite irgendwelche Endpunkte neu lädt oder die Übertragung der Kontrolle auf eine andere Seite im Prozess. Interaktionen mit Einzelseitenanwendungen sind oft darauf ausgelegt, dynamisch mit einem Webserver im Hintergrund zu interagieren.

Wie funktioniert diese Technologie? Vergleichen Sie es mit den Masterseiten von ASP.NET. Stimmt es, dass Sie mit den Masterseiten von ASP.NET ein einheitliches Layout für Ihre Anwendung erstellen können? Eine einzelne Masterseite kann das Erscheinungsbild und die Standardaktionen definieren, die Sie auf alle Seiten (oder eine Gruppe von Seiten) in der gesamten Anwendung anwenden möchten. Sie können dann separate Seiten für den Inhalt erstellen, den Sie anzeigen möchten Bei einer Anfrage an eine Inhaltsseite mischen sie das Layout der Masterseite und den Inhalt der Inhaltsseite, um die Ausgabe zu erstellen.

Wenn Sie sich eingehender mit der SPA- und ASP-Masterseitenimplementierung befassen, Sie beginnen zu erkennen, dass sie eher ähnlich als unterschiedlich sind – das heißt, die SPA kann als einfache Shell-Seite betrachtet werden, die die Inhaltsseite enthält. Sie ist wie eine Masterseite, mit der Ausnahme, dass die Shell-Seite in der SPA nicht neu geladen werden kann wird gemäß jeder neuen Seitenanforderung wie der Masterseite ausgeführt.

Vielleicht ist „Single Page Application“ ein unglücklicher Name (wie der von Donna Cheng), der Sie führt zu glauben, dass diese Technologie nicht für die Entwicklung von Webanwendungen geeignet ist, die auf Unternehmensebene skaliert werden müssen und möglicherweise Hunderte von Seiten und Tausende von Benutzern umfassen.

Das Ziel dieses Artikels besteht darin, eine Anwendung auf Unternehmensebene mit Hunderten von Inhaltsseiten basierend auf einer Einzelseitenanwendung zu entwickeln, einschließlich Authentifizierung, Autorisierung, Sitzungsstatus und anderen Funktionen, die Tausende von Benutzern unterstützen kann .

AngularJS – Übersicht

Die Beispiele in diesem Artikel umfassen Funktionen wie das Anlegen/Aktualisieren von Benutzerkonten, das Anlegen/Aktualisieren von Kunden und Produkten. Darüber hinaus können Benutzer Abfragen durchführen sowie Verkaufsaufträge für alle Informationen erstellen und aktualisieren. Um diese Funktionen zu implementieren, wird dieses Beispiel auf Basis von AngularJS entwickelt. AngularJS ist ein Open-Source-Webanwendungs-Framework, das von Entwicklern von Google und der AngularJS-Community verwaltet wird.

AngularJS benötigt nur HTML, CSS und JavaScript, um Single-Page-Anwendungen auf der Clientseite zu erstellen. Ziel ist es, die Entwicklung und das Testen zu vereinfachen und die Leistung von MVC-Webanwendungen zu verbessern.

Diese Bibliothek liest andere in HTML enthaltene benutzerdefinierte Tag-Attribute und befolgt dann die Anweisungen dieses benutzerdefinierten Attributs und kombiniert die Seiten-E/A mit Standard-JavaScript-Variablen im generierten Modul. Die Werte dieser JavaScript-Standardvariablen können manuell festgelegt oder aus einer statischen oder dynamischen JSON-Datenquelle bezogen werden.

Erste Schritte mit AngularJS – Shell-Seiten, Module und Routen

Das erste, was Sie tun müssen, ist das AngularJS-Framework in Ihr Projekt herunterzuladen. Sie können das Framework von http://www.php.cn/ herunterladen Artikel Es wurde mit MS Visual Studio Web Express 2013 Edition entwickelt, daher habe ich AngularJS aus einem Nuget-Paket mit dem folgenden Befehl installiert:

Install-Package AngularJS -Version 1.2.21

in Nuget Package Management Console Um es einfach und flexibel zu halten, habe ich ein leeres Visual Studio-Webanwendungsprojekt erstellt und die Microsoft Web API 2-Bibliothek in den Kernreferenzen ausgewählt. Diese Anwendung verwendet die Web API 2-Bibliothek, um Server zu implementieren. Nebenanfragen für RESTful API.

Wenn Sie nun eine SPA-Anwendung mit AngularJS erstellen möchten, müssen Sie zunächst eine Shell-Seite und eine Routing-Tabelle zum Abrufen der Inhaltsseite einrichten. Zu Beginn benötigt die Shell-Seite nur ein Team-AngularJS Ein Verweis auf die JavaScript-Bibliothek und eine NG-Ansicht, um AngularJS mitzuteilen, wo die Inhaltsseite auf der Shell-Seite gerendert werden muss Shell-Seite Im Beispiel werden mehrere Links AngularJS-Routen zugeordnet. Die ng-view-Direktive für das p-Tag ist eine Direktive, die die gerenderte Inhaltsseite der ausgewählten Route in die Shell-Seite einbinden kann, um den $route-Dienst von AngularJS zu ergänzen. Jedes Mal, wenn sich die aktuelle Route ändert, basiert die enthaltene Ansicht auch auf $ Die Konfiguration des Routendienstes ändert sich entsprechend. Wenn der Benutzer beispielsweise den Link „Neuen Kunden hinzufügen“ auswählt, rendert AngularJS den Inhalt zum Hinzufügen eines neuen Kunden in der NG-Ansicht HTML-Fragment .

<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Shell Page example</title>
</head>
<body> 
<p>
<ul>
<li><a href="#Customers/AddNewCustomer">Add New Customer</a></li>
<li><a href="#Customers/CustomerInquiry">Show Customers</a></li>
</ul>
</p>
<!-- ng-view directive to tell AngularJS where to inject content pages -->
<p ng-view></p>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>

Nach dem Login kopieren

Die nächste app.js-Datei wird auch von der Shell-Seite referenziert. Das JavaScript in dieser Datei erstellt das AngularJS-Modul für die Anwendung. Darüber hinaus wird in dieser Datei die gesamte Routing-Konfiguration für die Anwendung definiert. Sie können sich ein AngularJS-Modul als einen Container vorstellen, der verschiedene Teile Ihrer Anwendung kapselt. Die meisten Anwendungen verfügen über eine Hauptmethode, die verschiedene Teile der Anwendung initialisiert und verbindet. AngularJS-Anwendungen hingegen verfügen nicht über eine Hauptmethode, sondern lassen Module deklarativ angeben, wie die Anwendung gestartet und konfiguriert wird. Die Beispielanwendung für diesen Artikel verfügt nur über ein AngularJS-Modul, obwohl es mehrere unterschiedliche Teile der Anwendung gibt (Kunden, Produkte, Bestellungen und Benutzer).

Der Hauptzweck von app.js besteht nun darin, das AngularJS-Routing wie unten gezeigt einzurichten. Der

$routeProvider-Dienst von AngularJS akzeptiert die

when()-Methode, die einen Uri mit einem Muster

abgleicht. Wenn eine Übereinstimmung gefunden wird, folgt der HTML-Inhalt der einzelnen Seite der Steuerung von der zugehörige Inhalt Die Controller-Datei wird zusammen mit der Controller-Datei in die Shell-Seite geladen. Die Controller-Datei ist einfach eine JavaScript-Datei, die eine Referenz mit dem Inhalt einer bestimmten Routenanforderung erhält.

AngularJS-Controller

//Define an angular module for our app
var sampleApp = angular.module(&apos;sampleApp&apos;, []);
//Define Routing for the application
sampleApp.config([&apos;$routeProvider&apos;,
    function($routeProvider) {
        $routeProvider.
            when(&apos;/Customers/AddNewCustomer&apos;, {
                templateUrl: &apos;Customers/AddNewCustomer.html&apos;,
                controller: &apos;AddNewCustomerController&apos;
            }).
            when(&apos;/Customers/CustomerInquiry&apos;, {
                templateUrl: &apos;Customers/CustomerInquiry.html&apos;,
                controller: &apos;CustomerInquiryController&apos;
            }).
            otherwise({
                redirectTo: &apos;/Customers/AddNewCustomer&apos;
            });
}]);

Nach dem Login kopieren

AngularJS-Controller ist nichts anderes als eine native JavaScript-Funktion, die nur an einen bestimmten Bereich gebunden ist. Controller werden verwendet, um Ihren Ansichten Logik hinzuzufügen. Ansichten sind HTML-Seiten. Diese Seiten dienen lediglich der einfachen Datenanzeige, um Daten an diese HTML-Seiten zu binden. Es liegt grundsätzlich in der Verantwortung des Controllers, das Modell (d. h. die Daten) mit den Daten zu verknüpfen.

<p ng-controller="customerController">
<input ng-model="FirstName" type="text" style="width: 300px" />
<input ng-model="LastName" type="text" style="width: 300px" />       
<p>
<button class="btn btn-primary btn-large" ng-click="createCustomer()"/>Create</button>

Nach dem Login kopieren

Für die AddCustomer-Vorlage oben verweist die ng-controller-Direktive auf die JavaScript-Funktion customerController, die alle Datenbindungen und JavaScript ausführt Funktionen für diese Ansicht.

Out of the box - Skalierbarkeitsprobleme

function customerController($scope) 
{
    $scope.FirstName = "William";
    $scope.LastName = "Gates"; 

    $scope.createCustomer = function () {          
        var customer = $scope.createCustomerObject();
        customerService.createCustomer(customer, 
                        $scope.createCustomerCompleted, 
                        $scope.createCustomerError);
    }
}

Nach dem Login kopieren