✅ Izradite dinamičke rute s AngularJS ngRoute

Sadržaj

Korištenje ngRoute
Korištenje ruta
Postojanost podataka
Kako stvoriti dinamičke rute

BilješkaZa izvođenje ovog vodiča poželjno je imati jasnu osnovu AngularJS, budući da nećemo ulaziti u detalje o nekim tehničkim aspektima ove tehnologije.

Dok znamo, AngularJS Omogućuje nam veliki broj modula, usluga i filtera koji su korisni pri izradi web ili mobilne aplikacije za danas. Postoje drugi moduli koje ne možemo pronaći u jezgri ovog okvira, jedan od njih je ngRoute. Ovaj modul ima funkciju korištenja prijateljskih URL -ova dodjeljujući mu kontroler i predložak koji se automatski poziva putem Ajaxa.

Više informacija o ngRoute:

Korištenje ngRoute

Prvo kreiramo naš direktorij projekta, nazvat ćemo ga routeapp, unutar ovog direktorija stvaramo drugi koji se zove javni, u javnosti stvaramo datoteku index.html. Sada unutar javnosti stvaramo direktorij zvan js u koji ćemo smjestiti naše kutne datoteke. Unutar js počinjemo postavljati dvije prve datoteke pod nazivom app.js i controller.js

Sve trenutne verzije angularjsa možemo dobiti na ovoj poveznici: https://code.angularjs.org/. Za korištenje vodiča koristit ćemo verziju 1.5.5 https://code.angularjs.org/1.5.5/
Index.html kôd

 Dinamička ruta Ng

App.js kôd

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

Controller.js kod

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

Sada ovo pokrećemo na web poslužitelju. Možete koristiti što god želite, bilo da je to Apache, nginx, Tomcat itd. Za moj slučaj koristit ću express iz nodejsa. Ako to želite učiniti i s nodejsom, možete slijediti sljedeće korake. Ako nikada niste koristili nodejs, možete slijediti sljedeći vodič u kojem je objašnjeno:

Izradite frontend arhitekturu s npm, bower i grunt.

Koristimo sljedeću naredbu u korijenu projekta iz naredbenog retka.

 npm ini

 npm install --save-dev express

Nakon što ekspresna instalacija stvaramo datoteku u korijenu projekta pod nazivom server.js i dodajemo sljedeći kôd:

 var express = require ('express'); var app = express (); var port = Broj (process.env.PORT || 3000); app.use (express.static (__ dirname + '/ javno')); app.listen (port, function () {console.log ('Aplikacija je pokrenuta na http: // localhost:' + port);});

Sada izvršavamo naredbu:

 čvor server.js

za pokretanje web poslužitelja.

Prilikom pokretanja web poslužitelja provjerite je li konzola za pregled elemenata preglednika upisala riječ AngularJS.

Sada učinimo to korištenje ngRoute.

Korištenje ruta

Koristit ćemo funkcija kutne konfiguracije za stvaranje ruta našeg webappa.

 .config (funkcija ($ routeProvider) {$ routeProvider .when ('/ home', {templateUrl: 'tpl/ home.html', kontroler: 'HomeController'}). inače ({redirectTo: '/ home'})); })

App.js kôd

/Dom: URI za našu početnu stranicu.
templateURL: put našeg predloška za dom.
kontroler: Kontroler dodijeljen za kućni predložak.
Inače: Prema zadanim postavkama postavite našu web lokaciju u / home

Mi stvaramo novi direktorij unutar javnosti pod nazivom tpl, a unutar tpl stvaramo datoteku pod nazivom dom.html.

Unutar tijela index.html dodajemo div oznaku s atributom ng-view koji će biti zadužen za iscrtavanje predloška home.html i budućih predložaka koje ćemo stvoriti u vodiču.

Informacije o ngView:

Kôd u index.html:

Dodamo kućni kontroler u controller.js

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

Ako je sve prošlo kako treba, trebali biste dobiti nešto poput sljedeće slike:

Postojanost podataka

Već smo testirali da naša usluga rute radi ispravno, nastavljamo sa stvaranjem modula za upravljanje korisnicima, u ovom modulu možemo stvarati, popisati, uređivati i brisati korisnike. Za vodič ne moramo komunicirati s pozadinom, koja učinit ćemo postojanost podataka s nizom, što znači da su ti podaci privremeni i da će se svaki put kad osvježimo aplikaciju navedeni podaci izgubiti.

Počinjemo stvaranjem sljedećih datoteka services.js Y vrijednosti.js unutar js direktorija

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

Kod Values.js

 angular.module ('routeapp.services', ['routeapp.values']) .factory ('Baze podataka', ['Korisnici', funkcija (Korisnici) {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];} , delete: function (index) {return Users.splice (index, 1);}}};}]) .factory ('Util', [function () {return {clone: function (obj) {if ( null = = obj || "objekt"! = typeobj) return obj; var copy = obj.constructor (); for (var attr in obj) {if (obj.hasOwnProperty (attr)) copy [attr] = obj [ attr];} vrati kopiju;}}}]);

Services.js kôd

U uslugama js stvaramo dvije tvornice tzv Baze podataka Y Koristan.

Baze podataka: Pobrinut će se za postojanost podataka zapisa korisnika (pomoću funkcija dodavanja, ažuriranja, popisa, dobivanja, uništavanja).

Koristan: Služit će kao kloniranje podataka koji će nam biti potrebni pri registraciji korisnika.

Ubacujemo modul usluga u naš app.js

 routeapp.usluge

Kod za prvi redak app.js izgledao bi ovako:

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

Sada moramo samo spremiti skripte services.js i values.js u index.html, postaviti ih ispred skripte app.js kako bismo izbjegli bilo kakve neugodnosti u izvršavanju aplikacije.

Prije nego nastavimo, provjerimo da li naša aplikacija ne prikazuje pogreške u razvojnoj konzoli. Ovako su datoteke dosad nastajale.

Nastavljamo s stvaranjem predložaka za registraciju i popis korisnika. Mi stvaramo unutar tpl-a na user.html i user-list.html

Korisničko ime Ime Email Spremi

User.html kôd

 
 
 Korisnik  Ime  Pošta 

 
 {{item.username}}  {{ime proizvoda}}  {{item.email}}

Korisnik	Ime	Pošta
{{item.username}}	{{ime proizvoda}}	{{item.email}}

Kôd user-list.html

Unutar controller.js dodajemo kontroler za user.html i user-list.html

 .controller ('UserController', funkcija ($ scope, baze podataka, uslužni program) {$ scope.user = {}; $ scope.save = function () {var user = Util.clone ($ scope.user); Databases.DataUser .add (korisnik); $ scope.user = {};};}) .controller ('UserListController', funkcija ($ scope, baze podataka) {$ scope.dataUser = Databases.DataUser.list ();})

Controller.js kod

Dodajte index.html veze za pristup dvama predlošcima:


Registracija korisnika
Posavjetujte se s korisnikom

Dodano u index.html

Trebamo samo dodati nove rute koje smo stvorili u konfiguraciju app.js, postaviti ih ispred inače funkcioniraju:

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

Da vidimo kako sve ide do sada.

POVEĆAJTE

Testirajte tako da registrirate više korisnika i provjerite da li se ispravno registriraju od Posavjetujte se s korisnicima.

Spremno, sada nastavljamo s ažuriranjem i uklanjanjem korisnika. Za ažuriranje korisnika samo dodajte novu funkciju UserController, mijenjamo prethodni kôd za ovaj novi:

 .controller ('UserController', funkcija ($ 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. ažuriranje (userID, korisnik); $ location.path (' / user / list');} else {Databases.DataUser.add (user);} $ scope.user = {};};})

Objašnjenje novog koda:

$ routeParams: Ova usluga će vratiti GET parametre naše aplikacije, u ovom slučaju ćemo je koristiti za vraćanje ID -a korisnika kojeg ćemo ažurirati. $ routeParams.userID. Više informacija o $ routerParams https: //docs.angular … ce /$ routeParams

Također moramo dodati novi put u konfiguraciju app.js:

 .when (' / user /: userID', {templateUrl: 'tpl / user.html', kontroler: 'UserController'})

Važno je postaviti ovaj novi put pod put ' / user / list', tako da će nam predstaviti sukob s ovim spomenutim.

' / user /: userID': Kao što vidimo, ovaj URL ima nešto posebno što se zove: userID, ovo je parametar koji ćemo koristiti u UserController -u.

Ostaje samo dodati novi stupac u user-list.html gdje ćemo dodati vezu za uređivanje registriranog korisnika.

 Uredi

Kôd u user-list.html

Sada moramo samo testirati ovu novu operaciju, osvježiti aplikaciju, registrirati se i zatim urediti korisnika.

Moramo samo dodati funkcionalnost za brisanje korisnika. Izrađujemo novi predložak u tpl-u pod nazivom user-delete.html

Želite ukloniti {{Korisničko ime}}?Ukloniti

Korisnički-delete.html kôd

Dodajemo novu vezu u tablicu user-list.html za pristup predlošku user-delete.html

 Ukloniti

Dodamo u controller.js kontroler za user-delete.html pod nazivom UserDeleteController

 .controller ('UserDeleteController', funkcija ($ scope, baze podataka, $ routeParams, $ location) {var userID = $ routeParams.userID; $ scope.user = Databases.DataUser.get (userID); $ scope.destroy = function ( ) {Databases.DataUser.destroy (userID); $ location.path (' / user / list');}})

I dodajemo put u konfiguraciju app.js

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

Osvježavamo aplikaciju, registriramo se i zatim testiramo operaciju uklanjanja korisnika.

Završili smo našu osnovnu aplikaciju! U našoj smo aplikaciji već savladali stvaranje ručnih ruta, no ako pomno pogledamo i vidimo koje su rute izgrađene:

/Dom
/ korisnika
/ korisnik / popis
/ user /: korisnički ID
/ user / delete /: userID

Izradili smo 4 rute za korisnički modul upornosti plus početni. Ako bismo morali izraditi druge module upornosti u našoj aplikaciji, poput proizvoda, kupaca, prodaje itd. Morali bismo stvoriti još 12 ruta. Zbog čega bi naša datoteka app.js rasla svaki put kad dodamo nove rute. Kako bismo to izbjegli, stvorit ćemo dinamički generator ruta kako bismo izbjegli ovu glavobolju.

Kako stvoriti dinamičke rute

Pogledajmo izbliza naše trenutne rute, za stvaranje novog korisnika koristimo rutu / korisnika.

Za postavljanje upita korisnicima / korisniku / popisu
Za uređivanje / user /: userID
Za brisanje / user / delete /: userID.

Možemo stvoriti neke rute gdje se koriste samo jedan, dva ili tri parametra i oni ih hvataju, koristimo ih po vlastitom ukusu. To bi izgledalo ovako:

Moramo nešto pojasniti, da bi dinamičke rute radile ispravno, moramo se pridržavati sljedećih pravila, da bismo ih objasnili, koristit ćemo isti primjer korisnika:

1. Ime korisnika treba koristiti i kao predložak i kao prefiks kontrolera.

2. Za upite kao drugi prefiks u vodiču koristimo popis riječi, na isti način možete ga promijeniti u što god želite, ali riječ koju koristite mora je imati i u nazivu predloška i u imenu upravljača. Primjer: user-list.html i UserListController; za brisanje: user-delete.html i UserDeleteController

3. Da biste identificirali prefikse u kontrolerima, koristite velika slova.

4. Nazivi kontrolera uvijek moraju završavati riječju Kontroler.

 var route = {controller: 'RouteController', templateUrl: function (uri) {var pattern = new RegExp ("[0-9] +"); var part_uri = (! pattern.test (uri.param2) && typeof uri.param2! == 'undefined')? '-' + uri.param2: ''; return 'tpl /' + uri.param1 + part_uri + '.html'; }}; $ routeProvider .when (' /: param1', route) .when (' /: param1 /: param2', route) .when (' /: param1 /: param2 /: param3', route) .na drugi način ({redirectTo: '/Dom'});

Kôd u app.js

Mi stvaramo tri obrasca puta, pa kad imate samo jedan parametar, on bi radio za / korisnika i / dom. Za dva parametra / korisnik /: korisnički ID i / korisnik / popis. Za tri parametra / user / delete /: userID

Također moramo stvoriti novi kontroler koji će biti zadužen za vođenje različitih kontrolera ovisno o URI -u.

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

Kod RouteControllera

Ovaj kontroler pak ovisi o filteru, stvaramo novu datoteku u js direktoriju pod nazivom filters.js

 angular.module ('routeapp.filters', []) .filter ('prefixController', function () {return function (text) {if (typeof text === 'undefined') {return '';} var p_string = novi RegExp ('[az] + [0-9] *'); var p_int = novi 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 '';}};});

Kod Filters.js

Ubrizgavamo filtar u app.js

 routeapp.filteri

Uvozimo skriptu filters.js u index.html postavljen prije app.js

Moramo promijeniti posljednji detalj UserController Y UserDeleteController. Kao i sada koristimo parametre: param1 ,: param2 ,: param3; parametar: userID više neće biti dostupan. Što moramo promijeniti u kontrolerima. Za UserController koristite param2, a za UserDeleteController param3

Kodirati UserController:

 var userID = $ routeParams.param2;

Kodirati UserDeleteController:

 var userID = $ routeParams.param3;

Završili smo naš dinamički usmjerivač. Sada više ne moramo brinuti o stvaranju novih ruta do naše web stranice jer sve kontroliramo mi RouterController i novu konfiguraciju $ routerProvider, možete je testirati stvaranjem novih predložaka i dodjeljivanjem njezinih ruta i kontrolera. Konačno, možemo stvoriti novi predložak koji nam može pomoći u otkrivanju pokušaja pristupa URL -u koji se ne nalazi na našoj web stranici. Možemo koristiti predložak 404. Izradit ćemo ga u tpl -u s imenom 404.html

Kôd za 404.html

404 Kontroler kontrolera

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

Da bismo mogli otkriti kada pokušavamo pristupiti nedostupnoj ruti, možemo koristiti a angularjs slušatelj tko se za to brine. Zamjenjujemo kod MainController sljedećim:

 .controller ('MainController', funkcija ($ opseg, $ lokacija) {console.log ('AngularJS'); $ opseg. $ on ('$ routeChangeError', funkcija (sljedeća, trenutna) {$ location.path ('/ 404 ');});})

Samo pokrenite aplikaciju i stavite URL koji nije dostupan na našoj web stranici, na primjer http: // localhost: 300… unknown-url. Aplikacija će se odmah preusmjeriti na / 404