NotizUm dieses Tutorial durchzuführen, ist es ratsam, eine klare Grundlage zu haben AngularJS, da wir auf einige technische Aspekte dieser Technologie nicht näher eingehen.
Während wir wissen, AngularJS Es bietet uns eine große Anzahl von Modulen, Diensten und Filtern, die sich bei der Erstellung einer Web- oder Mobilanwendung für heute als nützlich erweisen. Es gibt andere Module, die wir im Kern dieses Frameworks nicht finden können, eines davon ist ngRoute. Dieses Modul hat die Funktion, benutzerfreundliche URLs zu verwenden, indem es ihm einen Controller und ein Template zuweist, das automatisch über Ajax aufgerufen wird.
Weitere Informationen zu ngRoute:
Verwenden von ngRoute
Zuerst erstellen wir unser Projektverzeichnis, wir nennen es routeapp, innerhalb dieses Verzeichnisses erstellen wir ein weiteres namens public, in public erstellen wir eine index.html-Datei. Nun erstellen wir innerhalb von public ein Verzeichnis namens js, in dem wir unsere Angular-Dateien ablegen. In js beginnen wir, zwei erste Dateien namens app.js und controller.js zu platzieren
Alle aktuellen Versionen von anglejs erhalten Sie unter diesem Link: https://code.angularjs.org/. Um das Tutorial zu verwenden, verwenden wir Version 1.5.5 https://code.angularjs.org/1.5.5/
Index.html-Code
Dynamische Ng-RouteApp.js-Code
angle.module ('routeapp', ['ngRoute', 'routeapp.controller']);Controller.js-Code
angle.module ('routeapp.controller', []) .controller ('MainController', function () {console.log ('AngularJS');});Jetzt führen wir dies auf einem Webserver aus. Sie können verwenden, was Sie möchten, sei es Apache, nginx, Tomcat usw. Für meinen Fall werde ich Express von nodejs verwenden. Wenn Sie dies auch mit nodejs tun möchten, können Sie die folgenden Schritte ausführen. Wenn Sie noch nie nodejs verwendet haben, können Sie dem folgenden Tutorial folgen, in dem es erklärt wird:
- Erstellen Sie eine Frontend-Architektur mit npm, bower und grunt.
Wir verwenden den folgenden Befehl im Stammverzeichnis des Projekts von der Befehlszeile aus.
npm ini
npm install --save-dev expressNach dem Express-Installation Wir erstellen eine Datei im Stammverzeichnis des Projekts namens server.js und wir fügen den folgenden Code hinzu:
var express = erfordern ('express'); var app = express(); var port = Nummer (process.env.PORT || 3000); app.use (express.static (__ dirname + '/public')); app.listen (port, function () {console.log ('App gestartet unter http: // localhost:' + port);});Nun führen wir den Befehl aus:
Knotenserver.jsum den Webserver zu starten.
Wenn Sie den Webserver starten, überprüfen Sie, ob die Element-Inspector-Konsole Ihres Browsers das Wort eingegeben hat AngularJS.
Jetzt machen wir das Nutzung von ngRoute.
Routen verwenden
Wir werden die verwenden Winkelkonfigurationsfunktion um die Routen unserer Webapp zu erstellen.
.config (function ($ routeProvider) {$ routeProvider .when ('/home', {templateUrl: 'tpl/home.html', controller: 'HomeController'}) .otherwise ({redirectTo: '/home'}); }) App.js-Code- /Heimat: die URI für unsere Homepage.
- VorlagenURL: der Weg unserer Vorlage für zu Hause.
- Regler: Der für die Home-Vorlage zugewiesene Controller.
- Andernfalls: Platzieren Sie unsere Website standardmäßig in / home
Im Textkörper von index.html fügen wir ein div-Tag mit dem Attribut hinzu ng-Ansicht der für das Rendern der Vorlage home.html und der zukünftigen Vorlagen, die wir im Tutorial erstellen werden, verantwortlich ist.
Informationen zu ngView:
Code in index.html:
Wir fügen den Home-Controller hinzu controller.js .controller ('HomeController', Funktion () {console.log ('HomeController');})Wenn alles richtig gelaufen ist, sollten Sie etwa das folgende Bild erhalten:
Datenpersistenz
Wir haben bereits getestet, dass unser Routendienst korrekt funktioniert, wir erstellen weiterhin ein Modul zur Verwaltung von Benutzern, in diesem Modul können wir Benutzer erstellen, auflisten, bearbeiten und löschen. Für das Tutorial müssen wir nicht mit einem Backend kommunizieren, was Wir werden Datenpersistenz mit einem Array durchführen, was bedeutet, dass diese Daten temporär sind und bei jeder Aktualisierung der Anwendung diese Daten verloren gehen.
Wir beginnen mit der Erstellung der folgenden Dateien services.js Ja Werte.js im js-Verzeichnis
angle.module ('routeapp.values', []) .value ('Users', []); Values.js-Code
angle.module ('routeapp.services', ['routeapp.values']) .factory ('Databases', ['Users', function (Users) {return {DataUser: {add: function (user) {Users.push (user);}, list: function () {return Users;}, update: function (index, user) {return Users [index] = user;}, get: function (index) {return Users [index];} , zerstören: function (index) {return Users.splice (index, 1);}}};}]) .factory ('Util', [function () {return {clone: function (obj) {if ( null = = obj || "object"! = typeof obj) return obj; var copy = obj.constructor (); for (var attr in obj) {if (obj.hasOwnProperty (attr)) copy [attr] = obj [ attr];} Kopie zurückgeben;}}}]); Services.js-Code
In services js erstellen wir zwei Fabriken namens Datenbanken Ja Nützlich.
- Datenbanken: Es kümmert sich um die Persistenz der Benutzeraufzeichnungsdaten (mit Add-, Update-, List-, Get-, Destroy-Funktionen).
- Nützlich: Es dient als Kloner der Daten, die wir benötigen, wenn wir einen Benutzer registrieren.
Wir injizieren das Services-Modul in unsere app.js
routeapp.servicesDer Code für die erste Zeile von app.js würde so aussehen:
angle.module ('routeapp', ['ngRoute', 'routeapp.controller', 'routeapp.services'])Jetzt müssen wir nur noch die Skripte services.js und values.js in index.html speichern und vor dem Skript app.js platzieren, um Unannehmlichkeiten bei der Ausführung der Anwendung zu vermeiden.
Bevor wir fortfahren, testen wir, ob unsere Anwendung keine Fehler in der Entwicklungskonsole anzeigt. So wurden die Dateien bisher erstellt.
Wir erstellen weiterhin die Vorlagen für die Registrierung und die Liste der Benutzer. Wir erstellen innerhalb von tpl zu user.html und user-list.html
Benutzername Name E-Mail SpeichernUser.html-Code
| Nutzer | Name | |
|---|---|---|
| {{item.username}} | {{Artikelname}} | {{item.email}} |
Innerhalb controller.js wir fügen den Controller für user.html und user-list.html hinzu
.controller ('UserController', function ($ scope, Databases, Util) {$ scope.user = {}; $ scope.save = function () {var user = Util.clone ($ scope.user); Databases.DataUser .add (user); $ scope.user = {};};}) .controller ('UserListController', function ($ scope, Databases) {$ scope.dataUser = Databases.DataUser.list ();})Controller.js-Code
Fügen Sie in index.html die Links hinzu, um auf die beiden Vorlagen zuzugreifen:
- Benutzer registrieren
- Benutzer konsultieren
Wir müssen nur die neuen Routen, die wir erstellt haben, zur app.js-Konfiguration hinzufügen und sie vor die sonst Funktion:
.when ('/ user', {templateUrl: 'tpl / user.html', controller: 'UserController'}) .when ('/user / list', {templateUrl: 'tpl / user-list.html', controller : 'UserListController'}) Mal sehen, wie alles bisher läuft.
VERGRÖSSERN
Testen Sie, indem Sie mehrere Benutzer registrieren und überprüfen, ob sie sich korrekt registrieren von Wenden Sie sich an die Benutzer.
Fertig, jetzt fahren wir mit der Aktualisierung und Eliminierung der Benutzer fort. Um einen Benutzer zu aktualisieren, fügen Sie einfach neue Funktionen hinzu BenutzerController, ändern wir den vorherigen Code für diesen neuen:
.controller ('UserController', function ($ scope, Databases, Util, $ routeParams, $ location) {var userID = $ routeParams.userID; var isEdit = (userID! = undefined); $ scope.user = {}; if (isEdit) {$ scope.user = Databases.DataUser.get (userID);} $ scope.save = function () {var user = Util.clone ($ scope.user); if (isEdit) {Databases.DataUser. update (userID, user); $ location.path ('/ user / list');} else {Databases.DataUser.add (user);} $ scope.user = {};};}) Erklärung des neuen Codes:- $ routeParams: Dieser Dienst gibt die GET-Parameter unserer Anwendung zurück. In diesem Fall verwenden wir ihn, um die ID des Benutzers zurückzugeben, den wir aktualisieren werden. $ routeParams.userID. Weitere Informationen zu $ routerParams https: //docs.angular … ce / $ routeParams
Wir müssen auch einen neuen Pfad in der Konfiguration von app.js hinzufügen:
.when ('/ user /: userID', {templateUrl: 'tpl / user.html', controller: 'UserController'})Es ist wichtig, diesen neuen Pfad unter dem Pfad '/user/list' zu platzieren, damit er uns einen Konflikt mit dem letzteren präsentiert.
- '/Benutzer /: Benutzer-ID': Wie wir sehen, hat diese URL etwas Besonderes namens: userID, dies ist der Parameter, den wir in UserController verwenden.
Es bleibt nur noch eine neue Spalte in user-list.html hinzuzufügen, in der wir einen Link hinzufügen, um den registrierten Benutzer zu bearbeiten.
Code in user-list.htmlBearbeiten
Jetzt müssen wir nur noch diese neue Operation testen, die Anwendung aktualisieren, registrieren und dann den Benutzer bearbeiten.
Wir müssen nur die Funktionalität zum Löschen von Benutzern hinzufügen. Wir erstellen eine neue Vorlage in tpl namens user-delete.html
Sie möchten entfernen {{Nutzername}}?Entfernen Benutzer-delete.html-Code
Wir fügen einen neuen Link in die Tabelle user-list.html ein, um auf die Vorlage user-delete.html zuzugreifen
Wir fügen in controller.js den Controller für user-delete.html namens UserDeleteController . hinzuEntfernen
.controller ('UserDeleteController', function ($ scope, Databases, $ routeParams, $ location) {var userID = $ routeParams.userID; $ scope.user = Databases.DataUser.get (userID); $ scope.destroy = function ( ) {Databases.DataUser.destroy (userID); $ location.path ('/user / list');}}) Und wir fügen den Pfad in der Konfiguration von app.js hinzu
.when ('/ user / delete /: userID', {templateUrl: 'tpl / user-delete.html', controller: 'UserDeleteController'})Wir aktualisieren die Anwendung, registrieren und testen dann den Vorgang zum Entfernen des Benutzers.
Wir haben unsere Basisanwendung abgeschlossen! Wir beherrschen das Erstellen von manuellen Routen in unserer Anwendung bereits, aber wenn wir genau hinschauen und sehen, was die Routen gebaut sind:
- /Heimat
- / Nutzer
- / Benutzerliste
- / user /: userID
- / user / delete /: userID
So erstellen Sie dynamische Routen
Schauen wir uns unsere aktuellen Routen genau an, um einen neuen Benutzer zu erstellen, verwenden wir die Route / den Benutzer.
- Um die Benutzer / Benutzer / Liste abzufragen
- Um es zu bearbeiten / user /: userID
- Löschen / Benutzer / Löschen /: Benutzer-ID.
Wir können einige Routen erstellen, bei denen nur ein, zwei oder drei Parameter verwendet werden, und diese erfassen sie, verwenden sie nach unseren Wünschen. Es würde so aussehen:
Wir müssen etwas klarstellen, damit dynamische Routen richtig funktionieren, müssen wir die folgenden Regeln befolgen, um sie zu erklären, verwenden wir dasselbe Beispiel von Benutzer:
1. Der Name user sollte sowohl als Vorlage als auch als Controller-Präfix verwendet werden.
2. Für die Abfragen als zweites Präfix im Tutorial verwenden wir die Wortliste, genauso wie Sie sie beliebig ändern können, aber das Wort, das Sie verwenden, muss es sowohl im Namen der Vorlage als auch im Namen enthalten des Controllers. Beispiel: user-list.html und UserListController; zum Löschen: user-delete.html und UserDeleteController
3. Um die Präfixe in den Controllern zu identifizieren, verwenden Sie Großbuchstaben.
4. Controller-Namen müssen immer mit dem Wort Controller enden.
var route = {controller: 'RouteController', templateUrl: function (uri) {var pattern = new RegExp ("[0-9] +"); var part_uri = (! pattern.test (uri.param2) && typeof uri.param2! == 'undefiniert')? '-' + uri.param2: ''; 'tpl /' + uri.param1 + part_uri + '.html' zurückgeben; }}; $ routeProvider .when ('/: param1', route) .when ('/: param1 /: param2', route) .when ('/: param1 /: param2 /: param3', route) .otherwise ({redirectTo: '/Heimat'}); Code in app.js
Wir erstellen drei Pfadmuster, wenn Sie also nur einen einzigen Parameter haben, würde dieser für / user und / home funktionieren. Für zwei Parameter / user /: userID und /user / list. Für drei Parameter / user / delete /: userID
Wir müssen auch einen neuen Controller erstellen, der die verschiedenen Controller je nach URI leitet.
.controller ('RouteController', Funktion ($ scope, $ routeParams, $ controller, $ filter) {var prefix = $ filter ('prefixController') ($ routeParams.param1) + '' + $ filter ('prefixController') ( $ routeParams.param2); $ Controller (Präfix + 'Controller', {$ scope: $ scope});}) RouteController-Code
Dieser Controller wiederum hängt von einem Filter ab, wir erstellen eine neue Datei im js-Verzeichnis namens filter.js
angle.module ('routeapp.filters', []) .filter ('prefixController', function () {return function (text) {if (typeof text === 'undefined') {return '';} var p_string = new RegExp ('[az] + [0-9] *'); var p_int = new RegExp ("[0-9] +"); if (p_int.test (text)) {return '';} else if (p_string.test (text)) {return text.charAt (0) .toUpperCase () + ((text.length> 1)? text.slice (1): '');} else {return '';}};}); Filters.js-Code
Wir injizieren den Filter in app.js
routeapp.filterWir importieren das Skript filter.js in index.html, das vor app.js platziert wird
Wir müssen ein letztes Detail ändern in BenutzerController Ja BenutzerDeleteController. Wie jetzt verwenden wir Parameter: param1,: param2,: param3; der Parameter: userID ist nicht mehr verfügbar. Was wir in den Controllern ändern müssen. Verwenden Sie für UserController param2 und für UserDeleteController param3
Code BenutzerController:
var userID = $ routeParams.param2;Code BenutzerDeleteController:
var userID = $ routeParams.param3;Wir haben unseren dynamischen Router fertiggestellt. Jetzt müssen wir uns nicht mehr darum kümmern, neue Routen zu unserer Website zu erstellen, da alles von unserem gesteuert wird RouterController und der neuen Konfiguration des $routerProviders können Sie diesen testen, indem Sie neue Templates erstellen und seine Routen und Controller zuweisen. Schließlich können wir eine neue Vorlage erstellen, die uns helfen kann, beim Versuch, auf eine URL zuzugreifen, die auf unserer Website nicht gefunden wird, zu erkennen. Wir können eine 404-Vorlage verwenden, die wir in tpl mit dem Namen 404.html erstellen
Code für 404.html
404Controller-Controller
.controller ('404Controller', Funktion () {})Damit wir erkennen können, wenn wir versuchen, auf eine nicht verfügbare Route zuzugreifen, können wir a anglejs Hörer wer kümmert sich darum. Wir ersetzen den Code von Hauptcontroller durch folgendes:
.controller ('MainController', function ($ scope, $ location) {console.log ('AngularJS'); $ scope. $ on ('$ routeChangeError', function (next, current) {$ location.path ('/ 404 ');});}) Führen Sie einfach die Anwendung aus und geben Sie eine URL ein, die auf unserer Website nicht verfügbar ist, zum Beispiel http: // localhost: 300… unknown-url. Die Anwendung wird sofort auf / 404 umgeleitet
Du kannst Laden Sie diese Tutorial-Demo herunter hier:
routeapp.zip 344.9K 259 Downloads
