✅ Izveidojiet dinamiskus maršrutus, izmantojot AngularJS ngRoute

Satura rādītājs

Izmantojot ngRoute
Izmantojot maršrutus
Datu noturība
Kā izveidot dinamiskus maršrutus

PiezīmeLai veiktu šo apmācību, ieteicams iegūt skaidru pamatu AngularJS, jo mēs neiedziļināsimies dažos šīs tehnoloģijas tehniskajos aspektos.

Kamēr mēs zinām, AngularJS Tas nodrošina mūs ar lielu skaitu moduļu, pakalpojumu un filtru, kas ir noderīgi, veidojot tīmekļa vai mobilo lietojumprogrammu šodienai. Ir arī citi moduļi, kurus mēs nevaram atrast šīs sistēmas pamatā, viens no tiem ir ngRoute. Šī moduļa funkcija ir izmantot draudzīgus URL, piešķirot tam kontrolieri un veidni, kas tiek automātiski izsaukta, izmantojot Ajax.

Vairāk informācijas par ngRoute:

Izmantojot ngRoute

Vispirms mēs izveidojam savu projektu direktoriju, mēs to sauksim par routeapp, šajā direktorijā mēs izveidojam citu, ko sauc par publisku, publiski mēs izveidojam failu index.html. Tagad publiski mēs izveidojam direktoriju ar nosaukumu js, kur ievietosim leņķiskos failus. Js iekšpusē mēs sākam ievietot divus pirmos failus ar nosaukumu app.js un controller.js

Visas pašreizējās angularjs versijas var iegūt, izmantojot šo saiti: https://code.angularjs.org/. Lai izmantotu apmācību, mēs izmantosim versiju 1.5.5 https://code.angularjs.org/1.5.5/
Index.html kods

 Dinamiskais Ng maršruts

App.js kods

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

Controller.js kods

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

Tagad mēs to palaižam tīmekļa serverī. Jūs varat izmantot visu, kas jums patīk, vai tas būtu Apache, nginx, Tomcat utt. Manā gadījumā es izmantošu express no nodejs. Ja vēlaties to darīt arī ar nodejs, varat veikt šādas darbības. Ja jūs nekad neesat izmantojis nodejs, varat sekot šai apmācībai, kur tā ir izskaidrota:

Izveidojiet priekšgala arhitektūru ar npm, bower un grunt.

Mēs izmantojam šādu komandu projekta saknē no komandrindas.

 npm ini

 npm instalēt-save-dev express

Pēc tam, kad ātra uzstādīšana mēs izveidojam failu projekta saknē ar nosaukumu server.js un mēs pievienojam šādu kodu:

 var express = pieprasīt ('express'); var app = express (); var port = Skaitlis (process.env.PORT || 3000); app.use (express.static (__ dirname + '/ public')); app.listen (ports, funkcija () {console.log ('Lietotne sākta vietnē http: // localhost:' + ports);});

Tagad mēs izpildām komandu:

 mezgls server.js

lai palaistu tīmekļa serveri.

Palaižot tīmekļa serveri, pārbaudiet, vai jūsu pārlūkprogrammas elementu inspektora konsolē ir ierakstīts vārds AngularJS.

Tagad darīsim ngRoute izmantošana.

Izmantojot maršrutus

Mēs izmantosim leņķa konfigurācijas funkcija lai izveidotu mūsu tīmekļa lietotnes maršrutus.

 .config (function ($ routeProvider) {$ routeProvider .when ('/ home', {templateUrl: 'tpl/ home.html', controller: 'HomeController'}). citādi ({redirectTo: '/ home'}); })

App.js kods

/mājas: mūsu mājas lapas URI.
templateURL: mūsu mājas veidnes ceļš.
kontrolieris: Mājas veidnei piešķirtais kontrolieris.
Pretējā gadījumā: Pēc noklusējuma ievietojiet mūsu vietni / mājās

Mēs izveidojam jaunu direktoriju publiskajā saukā tpl, un tpl iekšpusē mēs izveidojam failu ar nosaukumu mājas.html.

Index.html pamattekstā mēs pievienojam div tagu ar atribūtu ng-skats kurš būs atbildīgs par veidnes home.html un turpmāko veidņu atveidošanu, ko mēs izveidosim apmācībā.

Informācija par ngView:

Kods index.html:

Mēs pievienojam mājas kontrolieri kontrolieris.js

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

Ja viss notika pareizi, jums vajadzētu iegūt kaut ko līdzīgu šim attēlam:

Datu noturība

Mēs jau esam pārbaudījuši, vai mūsu maršruta pakalpojums darbojas pareizi, turpinām veidot moduli lietotāju pārvaldībai, šajā modulī varam izveidot, uzskaitīt, rediģēt un dzēst lietotājus. Apmācībai mums nav jāsazinās ar aizmuguri, kas mēs saglabāsim datu noturību ar masīvu, kas nozīmē, ka šie dati ir īslaicīgi un ka katru reizi, kad atsvaidzinām lietojumprogrammu, minētie dati tiks zaudēti.

Mēs sākam, izveidojot šādus failus services.js Y vērtības.js js direktorijā

 angular.module ('routeapp.values', []) .value ('Lietotāji', []);

Values.js kods

 angular.module ('routeapp.services', ['routeapp.values']) .factory ('Databases', ['Users', function (Users) {return {DataUser: {add: function (user) {Users.push (lietotājs);}, saraksts: funkcija () {atgriezt lietotājus;}, atjaunināt: funkcija (indekss, lietotājs) {atgriezties lietotāji [indekss] = lietotājs;}, iegūt: funkcija (indekss) {atgriezties lietotāji [indekss];} , iznīcināt: function (index) {return Users.splice (index, 1);}}};}])) .factory ('Util', [function () {return {clone: function (obj) {if ( null = = obj || "objekts"! = typeof obj) return obj; var copy = obj.constructor (); for (var attr in obj) {if (obj.hasOwnProperty (attr)) copy [attr] = obj [ attr];} atgriezt kopiju;}}}]);

Services.js kods

Pakalpojumos js mēs izveidojam divas rūpnīcas ar nosaukumu Datu bāzes Y Noderīga.

Datu bāzes: Tā parūpēsies par to, lai lietotājs ierakstītu datus (izmantojot funkcijas pievienot, atjaunināt, uzskaitīt, iegūt, iznīcināt).

Noderīgi: Tas kalpos kā to datu klonētājs, kas mums būs nepieciešami, reģistrējot lietotāju.

Mēs injicējam pakalpojumu moduli mūsu app.js

 routeapp.services

Lietotnes app.js pirmās rindas kods izskatās šādi:

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

Tagad mums ir tikai jāsaglabā skripti services.js un values.js failā index.html, jānovieto pirms skripta app.js, lai izvairītos no jebkādām neērtībām lietojumprogrammas izpildē.

Pirms turpināt, pārbaudīsim, vai mūsu lietojumprogrammā izstrādes konsolē nav kļūdu. Šādi faili ir izveidoti līdz šim.

Mēs turpinām veidot veidnes reģistrācijai un lietotāju sarakstam. Mēs izveidojam tpl ietvaros uz user.html un user-list.html

Lietotājvārds E -pasts Saglabāt

User.html kods

 
 
 Lietotājs  Vārds  Pasts 

 
 {{item.username}}  {{priekšmeta nosaukums}}  {{item.email}}

Lietotājs	Vārds	Pasts
{{item.username}}	{{priekšmeta nosaukums}}	{{item.email}}

Kods user-list.html

Iekšpusē kontrolieris.js mēs pievienojam kontrolieri user.html un user-list.html

 .controller ('UserController', funkcija ($ ulatums, datubāzes, utilīta) {$ ulatums.user = {}; $ darbības joma.save = funkcija () {var lietotājs = Util.klons ($ darbības joma. lietotājs); Databases.DataUser $

Controller.js kods

Pievienojiet index.html saites, lai piekļūtu abām veidnēm:


Reģistrēt lietotāju
Konsultējieties ar lietotāju

Pievienots index.html

Mums ir tikai jāpievieno jaunie mūsu izveidotie maršruti konfigurācijai app.js, novietojiet tos pirms citādi funkcionēt:

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

Redzēsim, kā viss notiek līdz šim.

PALIELINĀT

Pārbaudiet, reģistrējot vairākus lietotājus un pārbaudot, vai viņi pareizi reģistrējas no Konsultējieties ar lietotājiem.

Gatavs, tagad mēs turpinām atjaunināt un likvidēt lietotājus. Lai atjauninātu lietotāju, vienkārši pievienojiet tai jaunas funkcijas UserController, mēs mainām iepriekšējo kodu šim jaunajam:

 .controller ('UserController', funkcija ($ mērogs, datu bāzes, utilīta, $ routeParams, $ atrašanās vieta) {var userID = $ routeParams.userID; var isEdit = (lietotāja ID! = nedefinēts); $ ulatums.lietotājs = {}; ja (isEdit) {$ scope.user = Databases.DataUser.get (userID);} $ ulatums.save = funkcija () {var lietotājs = Util.klons ($ darbības joma. lietotājs); if (isEdit) {Databases.DataUser. update (lietotāja ID, lietotājs); $ location.path (' / lietotājs / saraksts');} cits {Databases.DataUser.add (lietotājs);} $ ulatums.lietotājs = {};};})

Jaunā koda skaidrojums:

$ routeParams: Šis pakalpojums atgriezīs mūsu lietojumprogrammas GET parametrus, šajā gadījumā mēs to izmantosim, lai atgrieztu tā lietotāja ID, kuru mēs atjaunināsim. $ routeParams.userID. Plašāka informācija par $ routerParams https: //docs.angular … ce /$ routeParams

Mums ir arī jāpievieno jauns ceļš app.js konfigurācijā:

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

Ir svarīgi novietot šo jauno ceļu zem ceļa “ / lietotājs / saraksts”, lai tas mums parādītu konfliktu ar minēto.

' / user /: userID': Kā redzam, šim URL ir kaut kas īpašs, ko sauc: userID, tas ir parametrs, ko izmantosim UserController.

Atliek tikai pievienot jaunu kolonnu lietotāju sarakstā.html, kur mēs pievienosim saiti reģistrētā lietotāja rediģēšanai.

 Rediģēt

Kods lietotāju sarakstā.html

Tagad mums atliek tikai pārbaudīt šo jauno darbību, atsvaidzināt lietojumprogrammu, reģistrēties un pēc tam rediģēt lietotāju.

Mums tikai jāpievieno funkcionalitāte, lai izdzēstu lietotājus. Mēs izveidojam jaunu veidni tpl ar nosaukumu user-delete.html

Jūs vēlaties noņemt {{user.name}}?Noņemt

User-delete.html kods

Mēs pievienojam jaunu saiti tabulā user-list.html, lai piekļūtu veidnei user-delete.html

 Noņemt

Mēs pievienojam kontrollerim user. delete kontrolieri, ko sauc par UserDeleteController

 .controller ('UserDeleteController', funkcija ($ ulatums, datu bāzes, $ routeParams, $ atrašanās vieta) {var userID = $ routeParams.userID; $ ulatums.lietotājs = Databases.DataUser.get (lietotāja ID); $ ulatums.destroy = funkcija ( ) {Databases.DataUser.destroy (lietotāja ID); $ location.path (' / lietotājs / saraksts');}})

Un mēs pievienojam ceļu app.js konfigurācijā

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

Mēs atsvaidzinām lietojumprogrammu, reģistrējamies un pēc tam pārbaudām lietotāja noņemšanas darbību.

Mēs esam pabeiguši mūsu pamata pieteikumu! Mēs jau esam apguvuši manuālu maršrutu izveidi savā lietojumprogrammā, bet, ja paskatāmies un redzam, kādi maršruti ir veidoti:

/mājas
/ lietotājs
/ lietotājs / saraksts
/ user /: userID
/ user / delete /: userID

Mēs esam izveidojuši 4 maršrutus lietotāju noturības modulim, kā arī mājas maršrutu. Ja mūsu lietojumprogrammai būtu jāizveido citi noturības moduļi, piemēram, produkti, klienti, pārdošana utt. Mums būtu jāizveido vēl 12 maršruti. Tādējādi mūsu fails app.js pieaugs katru reizi, kad pievienosim jaunus maršrutus. Lai no tā izvairītos, mēs izveidosim dinamisku maršrutu ģeneratoru, lai izvairītos no šīm galvassāpēm.

Kā izveidot dinamiskus maršrutus

Cieši apskatīsim mūsu pašreizējos maršrutus, lai izveidotu jaunu lietotāju, mēs izmantojam maršrutu / lietotāju.

Lai vaicātu lietotājus / lietotāju / sarakstu
Lai to rediģētu / user /: userID
Lai dzēstu / user / delete /: userID.

Mēs varam izveidot dažus maršrutus, kuros tiek izmantots tikai viens, divi vai trīs parametri, un tie tos uztver, izmanto tos pēc mūsu vēlmēm. Tas izskatītos šādi:

Mums ir jāpaskaidro kaut kas, lai dinamiski maršruti darbotos pareizi, mums jāievēro šādi noteikumi, lai tos izskaidrotu, mēs izmantosim to pašu lietotāja piemēru:

1. Vārds lietotājs jāizmanto gan kā veidne, gan kā kontroliera prefikss.

2. Jautājumiem kā apmācības otrais prefikss mēs izmantojam vārdu sarakstu, tādā pašā veidā jūs varat to mainīt uz visu, ko vēlaties, taču jūsu izmantotajam vārdam jābūt gan veidnes nosaukumā, gan nosaukumā no kontroliera. Piemēram: user-list.html un UserListController; dzēšanai: user-delete.html un UserDeleteController

3. Lai kontrolieros identificētu prefiksus, izmantojiet lielos burtus.

4. Kontrolieru nosaukumiem vienmēr jābeidzas ar vārdu Kontrolieris.

 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: ''; atgriezt 'tpl /' + uri.param1 + part_uri + '.html'; }}; $ routeProvider .when (' /: param1', route) .when (' /: param1 /: param2', route) .when (' /: param1 /: param2 /: param3', route). citādi ({redirectTo: '/mājas'});

Kods vietnē app.js

Mēs izveidojam trīs ceļu modeļus, tādēļ, ja jums ir tikai viens parametrs, tas darbosies / user un / home. Diviem parametriem / lietotājs /: lietotāja ID un / lietotājs / saraksts. Trīs parametriem / user / delete /: userID

Mums arī jāizveido jauns kontrolieris, kas būs atbildīgs par dažādu kontrolieru vadīšanu atkarībā no URI.

 .controller ('RouteController', funkcija ($ ulatums, $ routeParams, $ kontrolieris, $ filtrs) {var prefix = $ filter ('prefixController') ($ routeParams.param1) + '' + $ filter ('prefixController') ( $ routeParams.param2); $ kontrolieris (prefikss + 'Kontrolieris', {$ ulatums: $ darbības joma});})

RouteController kods

Šis kontrolieris savukārt ir atkarīgs no filtra, mēs izveidojam jaunu failu js direktorijā ar nosaukumu filters.js

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

Mēs injicējam filtru lietotnē app.js

 routeapp.filters

Mēs importējam skriptu filters.js uz index.html, kas ievietots pirms app.js

Mums ir jāmaina pēdējā detaļa UserController Y UserDeleteController. Šobrīd mēs izmantojam parametrus: param1 ,: param2 ,: param3; parametrs: lietotāja ID vairs nebūs pieejams. Kas mums ir jāmaina kontrolieros. Lietotājam UserController izmantojiet param2, bet UserDeleteController param3

Kods UserController:

 var lietotāja ID = $ routeParams.param2;

Kods UserDeleteController:

 var lietotāja ID = $ routeParams.param3;

Mēs esam pabeiguši mūsu dinamisko maršrutētāju. Tagad mums vairs nav jāuztraucas par jaunu maršrutu izveidi uz mūsu vietni, jo visu kontrolē mūsu RouterController un $ routerProvider jauno konfigurāciju, varat to pārbaudīt, izveidojot jaunas veidnes un piešķirot tā maršrutus un kontrolierus. Visbeidzot, mēs varam izveidot jaunu veidni, kas var palīdzēt mums noteikt, mēģinot piekļūt vietrādim URL, kas nav atrodams mūsu vietnē. Mēs varam izmantot veidni 404. Mēs to izveidosim tpl ar nosaukumu 404.html

Kods 404.html

404Kontrollera kontrolieris

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

Lai mēs varētu noteikt, mēģinot piekļūt nepieejamam maršrutam, mēs varam izmantot a angularjs klausītājs kurš par to rūpējas. Mēs aizstājam kodu Galvenais kontrolieris šādi:

 .controller ('MainController', funkcija ($ ulatums, $ atrašanās vieta) {console.log ('AngularJS'); $ diapazons. $ on ('$ routeChangeError', function (next, current) {$ location.path ('/ 404 ');});})

Vienkārši palaidiet lietojumprogrammu un ievietojiet URL, kas mūsu vietnē nav pieejams, piemēram, http: // localhost: 300… unknown-url. Lietojumprogramma nekavējoties novirzīs uz / 404