Share
Odată cu recenta lansare oficială a versiunii Angular 2, este un moment bun pentru a se ridica la viteză pe unele dintre cele mai mari schimbări.
Un lucru care sa schimbat foarte mult este un router Angular 2, care a fost complet înlocuit în plumb până la eliberarea finală. Deci, în aceste două tutoriale video rapide de la cursul meu pe rutare Angular 2, vă voi arăta cum să creați configurații de rute și cum să le utilizați într-o aplicație. Veți afla despre rute simple, redirecționări și rute cu metacaractere. Apoi veți vedea cum să utilizați o directivă pentru a configura componenta aplicației pentru a afișa rutele.
Clipurile video continuă cu lecțiile anterioare din curs, dar ar trebui să puteți urmări tehnicile pe care le folosim. Puteți găsi fișierele sursă pentru întregul proiect pe GitHub.
Este posibil să construiți o aplicație completă în versiunea Angulară 2 fără rutare. Dacă putem face acest lucru, de ce avem nevoie de rutare?
Principalul motiv este că, dacă nu folosim rutarea, aplicația noastră va depinde exclusiv de navigarea prin controlul programelor. Va trebui să scoatem componentele pe baza interacțiunii utilizatorilor, cum ar fi atunci când fac clic pe ceva.
Cu rutare, vom putea naviga prin comutarea adreselor URL. Toate componentele vor fi hartă pe un traseu, permițându-ne să ne mutăm cu ușurință în jurul aplicației noastre.
Mai întâi, pentru a face munca de rutare, trebuie să adăugăm o bază de href în capul fișierului index.html.
Anterior, ne-am configura traseele din componenta care le găzduiește. În acest caz, acest lucru ar însemna adăugarea configurațiilor noastre de rute la fișierul nostru app.component. Cu noul router, este sugerat să creăm configurația rutei într-un fișier separat.
Deci, să creăm un fișier numit app.routes.ts în rădăcina directorului aplicației.
Primul lucru pe care îl vom adăuga la acest fișier sunt importurile.
În primul rând, apuca provideRouter sau RouterConfig de la routerul Angular. Apoi importați componentele Despre, Eroare și Acasă din dosarul paginilor. Trebuie să le importăm astfel încât să putem ajunge la aceste componente.
Următorul lucru pe care îl vom face este să adăugăm configurația rutei noastre pentru a ține căile noastre:
const: RouterConfig = [];
Aici folosim a const declaraţie. Acesta este unul dintre modurile în care putem declara o variabilă în TypeScript și reprezintă o valoare care nu poate fi modificată. În acest caz, îl folosim pentru a ne ține RouterConfig.
Acum, primul lucru pe care îl vom adăuga este o redirecționare. Într-un moment, vom adăuga un traseu cu metacaractere pentru pagina noastră de eroare. Acest lucru va cauza ca aplicația noastră să pornească din pagina de eroare. Motivul este că atunci când începe aplicația noastră, nu are un traseu. Prin urmare, trebuie să specificăm o componentă ca rută implicită.
Am putea adăuga cu ușurință componenta pe care dorim să o pornim pe ruta goală, însă modul sugerat de a face acest lucru este cu o redirecționare. Redirecționarea trebuie să vină mai întâi sau nu va funcționa corect. Iată cum arată:
Mai întâi avem calea noastră, care este o rută goală. Acesta este ruta pe care o va lansa aplicația noastră. Apoi, avem redirecționarea noastră, care ne va schimba calea spre casă când va întâlni un traseu gol. După asta, avem noi pathMatch. Nu voi intra în detaliu decât să spun că acest lucru face ca ruta goală să se potrivească cu redirecționarea.
Atunci avem ruta noastră care indică AboutComponent. Calea este setată la 'despre', ceea ce vom vedea în bara de adrese când navigăm pe acest traseu. Componenta care va fi navigată este AboutComponent. După aceea, avem HomeComponent. Calea este 'Acasă', iar componenta de lansat este HomeComponent.
Acesta este ruta pe care vom naviga de la redirecționare. Apoi ultima rută pe care o vom adăuga este un traseu cu metacaractere. Acest lucru se va potrivi cu toate rutele pe care le-am definit. Din acest motiv am adăugat redirecționarea. Dacă nu, aplicația noastră ar începe pe această rută de când pornim de pe un traseu care nu este definit, un traseu gol.
După adăugarea redirecționării, orice rută pe care o tastăm nu există, va primi pagina de eroare. Apoi vom exporta un alt const folosind metoda routerului de la routerul Angular. Utilizăm rutele pe care le configuram cu această metodă.
Odată ce facem asta, rutele noastre sunt terminate. Ultimul lucru pe care trebuie să-l facem este să adăugăm rutare aplicației noastre.
Mergeți la main.ts fişier. Primul lucru pe care îl vom face în acest fișier este importul myRouterProviders din fișierul de rute de aplicații pe care l-am creat. Apoi trebuie să-l adăugăm la funcția de bootstrap. Adăugându-le aici are avantajul de a face rutele disponibile pentru toate componentele din aplicația noastră.
Odată ce facem asta, am terminat să ne stabilim rutele. În următorul videoclip, vom termina configurația de rutare și vom previzualiza aplicația.
Până acum, ne-am configurat rutele și le-am adăugat la funcția de bootstrap. Acum, trebuie doar să configuram componenta aplicației pentru a ne găzdui rutele.
Iată cum app.component.ts ar trebui sa arate:
În primul rând, importăm directivele noastre privind ruterul. Am văzut acest lucru înainte când o componentă trebuie să utilizeze legătura routerului. Această componentă va folosi legătura router-ului și o altă directivă a ieșirii routerului Angular 2. După aceea, ștergem șablonul și adaugăm un backtick pentru a deveni șir de șablon. Acest lucru ne va permite să creăm un șablon pentru mai multe linii.
Mai întâi, adăugăm a div pentru bara de navigație bootstrap. Această navetă va apărea pe fiecare pagină, deoarece face parte din șablon. Apoi, în interiorul barului nav, adăugăm marca noastră. Acesta poate fi text sau o imagine și reprezintă branding-ul aplicației dvs..
Apoi adăugăm o listă neordonată. În interior, vom adăuga legăturile noastre pentru un bar nav. În linkurile noastre, în loc de o adresă URL la care să navigăm, avem routerLink. Acesta este modul în care navigăm către un traseu în interacțiunea cu utilizatorul. Aici suntem setați să navigăm la ruta de domiciliu când faceți clic pe acest buton.
Putem scrie, de asemenea routerLink într-o altă formă în interiorul unei matrice. În mod normal, facem acest lucru când trebuie să furnizăm mai multe informații pe ruta noastră. Apoi, avem și o routerLinkActive directivă, care va aplica clasa de meniu legăturii atunci când ruta este activă. Folosim acest lucru pentru a afișa un indiciu vizual cu privire la ce pagină suntem.
Apoi vom adăuga un alt link de ruter care navighează către pagina Despre. Apoi vom adăuga router-ieșire directivă. Acesta este motivul pentru care componentele nu au nevoie de un selector. Când sunt încărcate la rutare, această directivă va găzdui componentele. În timp ce restul acestui șablon va apărea static pe fiecare pagină, router-ieșire se va schimba pe baza căii pe care se navighează. În sfârșit, pentru acest fișier, adăugăm directivele routerului.
După aceea, ultimul lucru pe care trebuie să-l facem este să adăugăm o regulă CSS la style.css fişier:
.meniu background-color: alb;
Această regulă este pentru clasa care va fi aplicată atunci când ruta atașată la legătura ruterului este activă. Fundalul legăturii va fi culoarea albă. Și acum, rutarea este configurată pentru aplicația noastră.
Continuați și salvați proiectul și executați npm start în dosarul proiectului.
Dacă totul sa făcut corect, aplicația ar trebui să fie compilată și apoi lansată dintr-un browser web.
Dacă observați, fundalul liniei de domiciliu este umbrit în alb. Acest lucru se datorează faptului că acesta este ruta activă. Apoi dacă faceți clic pe Despre buton, ar trebui să mergem la pagina Despre.
După aceea, să tastăm un traseu inexistent în bara de adrese. Când facem asta, ar trebui să primim o pagină de eroare.
În prezent, avem o rutare care funcționează în aplicația noastră, dar putem face mult mai multe. În restul cursului, vă veți arunca cu capul în rută în profunzime.
În cursul complet, Angular 2 Routing, vă voi învăța cum să utilizați noul router Angular 2 în aplicațiile dvs. Veți vedea cum să configurați rutarea de bază pe pagini statice, cum să extrageți parametrii din calea traseului și cum să efectuați modularea modului de rutare. De asemenea, veți vedea cum poate fi implementat controlul accesului utilizatorilor cu routerul Angular 2.
Accentsconagua