✅ Creëer dynamische routes met AngularJS ngRoute

Inhoudsopgave

ngRoute gebruiken
Routes gebruiken
Gegevenspersistentie
Dynamische routes maken

OpmerkingVoor het uitvoeren van deze tutorial is het raadzaam om een duidelijke basis te hebben voor: AngularJS, aangezien we niet in detail zullen treden op enkele technische aspecten van deze technologie.

Terwijl we weten, AngularJS Het biedt ons een groot aantal modules, diensten en filters die van pas komen bij het maken van een web- of mobiele applicatie voor vandaag. Er zijn andere modules die we niet in de kern van dit framework kunnen vinden, een daarvan is ngRoute. Deze module heeft de functie om gebruiksvriendelijke URL's te gebruiken door er een controller en een sjabloon aan toe te wijzen die automatisch wordt aangeroepen via Ajax.

Meer informatie over ngRoute:

ngRoute gebruiken

Eerst maken we onze projectmap aan, we zullen het routeapp noemen, binnen deze map maken we een andere map aan met de naam public, in het openbaar maken we een index.html-bestand. Nu maken we binnen public een map met de naam js waar we onze hoekige bestanden gaan plaatsen. Binnen js beginnen we met het plaatsen van twee eerste bestanden genaamd app.js en controller.js

We kunnen alle huidige versies van angularjs krijgen via deze link: https://code.angularjs.org/. Om de tutorial te gebruiken, gebruiken we versie 1.5.5 https://code.angularjs.org/1.5.5/
Index.html-code

 Dynamische Ng-route

App.js-code

 angular.module ('routeapp', ['ngRoute', 'routeapp.controller']);

Controller.js-code

 angular.module ('routeapp.controller', []) .controller ('MainController', functie () {console.log ('AngularJS');});

Nu draaien we dit op een webserver. Je kunt gebruiken wat je maar wilt, of het nu Apache, nginx, Tomcat, enz. Voor mijn geval zal ik express van nodejs gebruiken. Als je het ook met nodejs wilt doen, kun je de volgende stappen volgen. Als je nog nooit nodejs hebt gebruikt, kun je de volgende tutorial volgen waar het wordt uitgelegd:

Creëer frontend architectuur met npm, bower en grunt.

We gebruiken de volgende opdracht in de hoofdmap van het project vanaf de opdrachtregel.

 npm ini

 npm install --save-dev express

Na de spoed installatie we maken een bestand in de hoofdmap van het project genaamd server.js en we voegen de volgende code toe:

 var express = vereisen ('express'); var app = express (); var port = nummer (process.env.PORT || 3000); app.use (express.static (__ dirname + '/public')); app.listen (poort, functie () {console.log ('App gestart op http: // localhost:' + poort);});

Nu voeren we het commando uit:

 node server.js

om de webserver te starten.

Wanneer u de webserver start, controleert u of de elementcontroleconsole van uw browser het woord heeft getypt AngularJS.

Laten we nu de . doen gebruik van ngRoute.

Routes gebruiken

We zullen de gebruiken hoekconfiguratiefunctie om de routes van onze webapp te maken.

 .config (functie ($ routeProvider) {$ routeProvider .when ('/ home', {templateUrl: 'tpl / home.html', controller: 'HomeController'}) .anders ({redirectTo: '/ home'}); })

App.js-code

/thuis: de URI voor onze homepage.
sjabloon-URL: het pad van onze sjabloon voor thuis.
controleur: De controller die is toegewezen aan de thuissjabloon.
Anders: Plaats standaard onze website in / home

We maken een nieuwe map binnen public genaamd tpl, en binnen tpl maken we een bestand met de naam thuis.html.

In de body van index.html voegen we een div-tag toe met het attribuut ng-view die verantwoordelijk is voor het renderen van de home.html-sjabloon en de toekomstige sjablonen die we in de zelfstudie gaan maken.

Informatie over ngView:

Code in index.html:

We voegen de thuiscontroller toe in controller.js

 .controller ('HomeController', functie () {console.log ('HomeController');})

Als alles goed is gegaan, zou je zoiets als de volgende afbeelding moeten krijgen:

Gegevenspersistentie

We hebben al getest dat onze routeservice correct werkt, we gaan verder met het maken van een module om gebruikers te beheren, in deze module kunnen we gebruikers aanmaken, weergeven, bewerken en verwijderen. Voor de tutorial hoeven we niet te communiceren met een backend, wat: we zullen gegevenspersistentie doen met een array, wat betekent dat deze gegevens tijdelijk zijn en dat elke keer dat we de applicatie vernieuwen, deze gegevens verloren gaan.

We beginnen met het maken van de volgende bestanden: services.js Y waarden.js binnen js-map

 angular.module ('routeapp.values', []) .value ('Gebruikers', []);

Values.js-code

 angular.module ('routeapp.services', ['routeapp.values']) .factory ('Databases', ['Users', function (Users) {return {DataUser: {add: function (user) {Users.push (gebruiker);}, lijst: functie () {return gebruikers;}, update: functie (index, gebruiker) {return gebruikers [index] = gebruiker;}, get: functie (index) {return gebruikers [index];} , destroy: function (index) {return Users.splice (index, 1);}}};}]) .factory ('Util', [function () {return {clone: function (obj) {if ( null = = obj || "object"! = type obj) return obj; var copy = obj.constructor (); for (var attr in obj) {if (obj.hasOwnProperty (attr)) copy [attr] = obj [ attr];} kopie terugsturen;}}}]);

Services.js-code

In services js creëren we twee fabrieken genaamd Databases Y Bruikbaar.

databanken: Het zorgt voor de persistentie van de gegevens van de gebruikersrecords (met behulp van add, update, list, get, destroy functies).

Bruikbaar: Het zal dienen als een kloon van de gegevens die we nodig hebben wanneer we een gebruiker registreren.

We injecteren de services-module in onze app.js

 routeapp.services

De code voor de eerste regel van app.js ziet er als volgt uit:

 angular.module ('routeapp', ['ngRoute', 'routeapp.controller', 'routeapp.services'])

Nu hoeven we alleen de services.js en values.js scripts op te slaan in index.html, ze voor het app.js script te plaatsen om elk soort ongemak bij het uitvoeren van de applicatie te voorkomen.

Laten we, voordat we verder gaan, testen of onze toepassing geen fouten vertoont in de ontwikkelconsole. Dit is hoe de bestanden tot nu toe zijn gemaakt.

We gaan door met het maken van de sjablonen voor de registratie en de lijst met gebruikers. We creëren binnen tpl naar user.html en user-list.html

Gebruikersnaam Naam E-mail Opslaan

Gebruiker.html-code

 
 
 Gebruiker  Naam  Mail 

 
 {{item.gebruikersnaam}}  {{Itemnaam}}  {{item.e-mail}}

Gebruiker	Naam	Mail
{{item.gebruikersnaam}}	{{Itemnaam}}	{{item.e-mail}}

Code gebruiker-lijst.html

Binnenin controller.js we voegen de controller toe voor user.html en user-list.html

 .controller ('UserController', functie ($ scope, Databases, Util) {$ scope.user = {}; $ scope.save = function () {var user = Util.clone ($ scope.user); Databases.DataUser .add (gebruiker); $ scope.user = {};};}) .controller ('UserListController', functie ($ scope, Databases) {$ scope.dataUser = Databases.DataUser.list ();})

Controller.js-code

Voeg in index.html de links toe om toegang te krijgen tot de twee sjablonen:


Gebruiker registreren
Gebruiker raadplegen

Toegevoegd in index.html

We hoeven alleen de nieuwe routes die we hebben gemaakt toe te voegen aan de app.js-configuratie, plaats ze vóór de anders functioneren:

 .when ('/ user', {templateUrl: 'tpl / user.html', controller: 'UserController'}) .when ('/ user / list', {templateUrl: 'tpl / user-list.html', controller : 'UserListController'})

Eens kijken hoe alles tot nu toe gaat.

VERGROTEN

Test door meerdere gebruikers te registreren en te controleren of ze correct registreren vanaf Raadpleeg gebruikers.

Klaar, nu gaan we verder met de update en eliminatie van gebruikers. Om een gebruiker bij te werken, voegt u gewoon nieuwe functionaliteit toe aan Gebruikerscontroller, veranderen we de vorige code voor deze nieuwe:

 .controller ('UserController', functie ($ 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 = {};};})

Uitleg van de nieuwe code:

$ routeparameters: Deze service retourneert de GET-parameters van onze applicatie, in dit geval zullen we deze gebruiken om de ID te retourneren van de gebruiker die we gaan updaten. $ routeParams.gebruikers-ID. Meer informatie over $ routerParams https: //docs.angular … ce / $ routeParams

We moeten ook een nieuw pad toevoegen in de configuratie van app.js:

 .wanneer ('/ gebruiker /: gebruikers-ID', {templateUrl: 'tpl / gebruiker.html', controller: 'UserController'})

Het is belangrijk om dit nieuwe pad onder het pad '/gebruiker/lijst' te plaatsen, zodat we een conflict krijgen met laatstgenoemde.

'/ gebruiker /: gebruikers-ID': Zoals we kunnen zien, heeft deze URL iets speciaals genaamd: userID, dit is de parameter die we zullen gebruiken in UserController.

Het blijft alleen om een nieuwe kolom in user-list.html toe te voegen waar we een link zullen toevoegen om de geregistreerde gebruiker te bewerken.

 Bewerking

Code in gebruikerslijst.html

Nu hoeven we alleen nog deze nieuwe bewerking te testen, de applicatie te vernieuwen, te registreren en vervolgens de gebruiker te bewerken.

We hoeven alleen de functionaliteit toe te voegen om gebruikers te verwijderen. We maken een nieuwe sjabloon in tpl genaamd user-delete.html

U wilt verwijderen {{gebruikersnaam}}?Verwijderen

User-delete.html code

We voegen een nieuwe link toe in de user-list.html tabel om toegang te krijgen tot de user-delete.html sjabloon

 Verwijderen

We voegen in controller.js de controller toe voor user-delete.html genaamd UserDeleteController

 .controller ('UserDeleteController', functie ($ scope, Databases, $ routeParams, $ location) {var userID = $ routeParams.userID; $ scope.user = Databases.DataUser.get (userID); $ scope.destroy = function ( ) {Databases.DataUser.destroy (gebruikers-ID); $ location.path ('/ gebruiker / lijst');}})

En we voegen het pad toe in de configuratie van app.js

 .when ('/ gebruiker / delete /: userID', {templateUrl: 'tpl / user-delete.html', controller: 'UserDeleteController'})

We vernieuwen de applicatie, registreren en testen vervolgens de werking van het verwijderen van de gebruiker.

We zijn klaar met onze basistoepassing! We hebben het maken van handmatige routes in onze applicatie al onder de knie, maar als we goed kijken en zien wat de routes zijn gebouwd:

/thuis
/ gebruiker
/ gebruikers lijst
/ gebruiker /: gebruikers-ID
/ gebruiker / verwijderen /: gebruikers-ID

We hebben 4 routes gemaakt voor de gebruikerspersistentiemodule plus de thuisroute. Als we andere persistentiemodules voor onze applicatie zouden moeten maken, zoals producten, klanten, verkoop, enz. We zouden nog 12 routes moeten creëren. Waardoor ons app.js-bestand zou groeien elke keer dat we nieuwe routes toevoegen. Om dit te voorkomen, gaan we een dynamische routegenerator maken om deze hoofdpijn te voorkomen.

Dynamische routes maken

Laten we eens goed kijken naar onze huidige routes, om een nieuwe gebruiker aan te maken gebruiken we de route/gebruiker.

Om de gebruikers / gebruiker / lijst op te vragen
Om het te bewerken / gebruiker /: userID
Voor verwijderen / gebruiker / verwijderen /: gebruikers-ID.

We kunnen enkele routes maken waarbij slechts één, twee of drie parameters worden gebruikt en deze vangen ze op, gebruiken ze naar onze smaak. Het zou er als volgt uitzien:

We moeten iets duidelijk maken, om dynamische routes correct te laten werken, moeten we de volgende regels volgen, om ze uit te leggen zullen we hetzelfde voorbeeld van gebruiker gebruiken:

1. De naam gebruiker moet worden gebruikt als zowel een sjabloon als een voorvoegsel van de controller.

2. Voor de query's als het tweede voorvoegsel in de tutorial gebruiken we de woordenlijst, op dezelfde manier waarop u deze kunt wijzigen in wat u maar wilt, maar het woord dat u gebruikt, moet het zowel in de naam van de sjabloon als in de naam hebben van de controleur. Bijv.: user-list.html en UserListController; voor verwijderen: user-delete.html en UserDeleteController

3. Gebruik hoofdletters om de voorvoegsels in de controllers te identificeren.

4. Controllernamen moeten altijd eindigen met het woord Controller.

 var route = {controller: 'RouteController', templateUrl: function (uri) {var patroon = nieuwe RegExp ("[0-9] +"); var part_uri = (! patroon.test (uri.param2) && typeof uri.param2! == 'undefined')? '-' + uri.param2: ''; retourneer 'tpl /' + uri.param1 + part_uri + '.html'; }}; $ routeProvider .when ('/: param1', route) .when ('/: param1 /: param2', route) .when ('/: param1 /: param2 /: param3', route) .anders ({redirectTo: '/thuis'});

Code in app.js

We creëren drie padpatronen, dus als je maar één parameter hebt, zou het werken voor / gebruiker en / thuis. Voor twee parameters / gebruiker /: gebruikers-ID en / gebruiker / lijst. Voor drie parameters / gebruiker / verwijderen /: userID

We moeten ook een nieuwe controller creëren die verantwoordelijk zal zijn voor het begeleiden van de verschillende controllers, afhankelijk van de URI.

 .controller ('RouteController', functie ($ scope, $ routeParams, $ controller, $ filter) {var prefix = $ filter ('prefixController') ($ routeParams.param1) + '' + $ filter ('prefixController') ( $ routeParams.param2); $ controller (prefix + 'Controller', {$ scope: $ scope});})

RouteController-code

Deze controller is op zijn beurt afhankelijk van een filter, we maken een nieuw bestand in de js-directory met de naam filters.js

 angular.module ('routeapp.filters', []) .filter ('prefixController', function () {return function (text) {if (typeof text === 'undefined') {return '';} var p_string = nieuwe RegExp ('[az] + [0-9] *'); var p_int = nieuwe RegExp ("[0-9] +"); if (p_int.test (tekst)) {return '';} else if (p_string.test (tekst)) {return text.charAt (0) .toUpperCase () + ((text.length> 1)? text.slice (1): '');} else {return '';}};});

Filters.js-code

We injecteren het filter in app.js

 routeapp.filters

We importeren het filters.js-script naar index.html geplaatst vóór app.js

We moeten nog een laatste detail veranderen in Gebruikerscontroller Y GebruikerDeleteController. Zoals nu gebruiken we parameters: param1,: param2,: param3; de parameter: userID zal niet langer beschikbaar zijn. Die we moeten veranderen in de controllers. Gebruik voor UserController param2 en voor UserDeleteController param3

Code Gebruikerscontroller:

 var gebruikers-ID = $ routeParams.param2;

Code GebruikerDeleteController:

 var gebruikers-ID = $ routeParams.param3;

We hebben onze dynamische router gefinaliseerd. Nu hoeven we ons geen zorgen meer te maken over het maken van nieuwe routes naar onze site, omdat alles wordt beheerd door onze RouterController en de nieuwe configuratie van de $ routerProvider, kunt u deze testen door nieuwe sjablonen te maken en de routes en controllers toe te wijzen. Ten slotte kunnen we een nieuwe sjabloon maken die ons kan helpen detecteren wanneer we proberen toegang te krijgen tot een url die niet op onze site staat. We kunnen een 404-sjabloon gebruiken. We gaan het maken in tpl met de naam 404.html

Code voor 404.html

404Controller-controller

 .controller ('404Controller', functie () {})

Zodat we kunnen detecteren wanneer we proberen toegang te krijgen tot een niet-beschikbare route, kunnen we een angularjs luisteraar wie zorgt ervoor. We vervangen de code van HoofdController door het volgende:

 .controller ('MainController', function ($ scope, $ location) {console.log ('AngularJS'); $ scope. $ on ('$ routeChangeError', function (volgende, huidige) {$ location.path ('/ 404 ');});})

Start gewoon de applicatie en plaats een URL die niet beschikbaar is op onze site, bijvoorbeeld http: // localhost: 300… unknown-url. De applicatie zal onmiddellijk doorverwijzen naar / 404