Share
Într-una din seriile anterioare de tutorial angular, am acoperit elementele de bază ale sistemului Angular, începând de la instalarea CLI-ului și apoi discutând despre modul de creare a componentelor de bază și implementarea rutei. Consultați articolul meu despre Crearea primului dvs. aplicație angulară: Noțiuni de bază, pentru o actualizare a instalării CLI-ului unghiular și a altor instrumente recomandate pentru a crea cu ușurință o aplicație Angular.
Aplicația de informații despre țară pe care am creat-o în această serie a fost bună pentru a începe cu Angular, dar nu avea câteva caracteristici. De exemplu, am stocat informația pe care am dorit să o afișăm utilizatorilor noștri într-un matrice. Cu toate acestea, în acest tutorial, vom trece dincolo de un set mic de date și lăsăm utilizatorilor să caute baza de date bibliotecă disponibilă de la CDNJS.
Iată aplicația pe care o vom construi:
În postul anterior, am creat o LibraryService pentru a obține informații despre diferite biblioteci utilizând API-ul CDNJS. Am creat, de asemenea, un app-routing.module.ts fișier pentru a furniza toate logica de rutare pentru aplicația noastră.
În logica de rutare, s-ar putea să fi observat că îi spunem lui Angular să redea HomeComponent când utilizatorii se află pe pagina de pornire a aplicației noastre. În mod similar, îi spunem lui Angular să redea LibraryListComponent când utilizatorii fac clic pe Lista tuturor bibliotecilor după ce introduceți ceva în câmpul de introducere.
În acest tutorial, vom crea aceste două componente pentru aplicația Angular. Vom crea HomeComponent mai întâi și apoi creați LibraryListComponent mai tarziu.
Pentru a crea HomeComponent fișierele utilizând CLI Angular, deplasați-vă în directorul bibliotecă de căutare- app în consola. După aceea, executați următoarea comandă:
ng genera componentă acasă
Acest lucru va crea un folder numit Acasă în directorul rădăcină al aplicației de căutare a bibliotecii. Acest dosar va avea patru fișiere diferite. Trei dintre aceste fișiere ar trebui să fie numit home.component.css, home.component.html, și home.component.ts.
Fișierul HTML va conține codul de șablon pentru HomeComponent, iar fișierul CSS va conține informațiile despre stil pentru acel șablon. Fișierul TypeScript va conține logica noastră HomeComponent.
Iată codul pentru home.component.ts fişier:
import Component de la '@ angular / core'; import LibraryService de la "... /library.service"; @Component (selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css']) clasa de export HomeComponent searchTerm = "; libraryName = ; constructor (bibliotecă privatăService: LibraryService) updateTerm (eveniment: orice): void this.searchTerm = event.target.value; updateName (eveniment: orice): void this.libraryName = event.target.value;
Dacă ați citit crearea primei serii de aplicații Angular, este posibil să fi observat că HomeComponent pe care am creat-o în cel de-al doilea tutorial al acelei serii a importat OnInit modul de la miezul unghiular. De asemenea, am inițializat valorile diferitelor proprietăți din clasa respectivă în interiorul ngOnInit () metodă.
Niciun astfel de modul nu a fost importat de data aceasta pentru că HomeComponent nu primește sau nu stabilește valori în timpul inițializării. În afară de asta, cele mai multe alte lucruri se fac într-o manieră similară.
Începem prin importul LibraryService clasa pe care am creat-o mai devreme. După aceea, am setat valoarea selector, templateUrl, și styleUrls în interiorul decoratorului de componente. Rețineți că puteți oferi mai multe foi de stil pentru a modela o componentă, dar numai un singur fișier șablon pentru ao face.
În interiorul HomeComponent definirea clasei, definim două proprietăți numite termen de căutare și libraryName. Valorile ambelor aceste proprietăți sunt setate, în mod implicit, la un șir gol. Aceste valori sunt actualizate în interiorul updateTerm () și updateName () atunci când utilizatorii introduc ceva în câmpul de introducere respectiv.
Al nostru HomeComponent va avea două câmpuri de intrare și două linkuri care se vor comporta ca butoane și vor duce utilizatorii pe căi diferite. Câmpurile de intrare vor asculta a keyup și actualizați valorile termen de căutare și libraryName proprietăți în consecință.
Cele două linkuri de lângă câmpurile de intrare iau utilizatorii pe căi diferite folosind routerLink directivă. În primul caz, utilizatorii merg la / List / SEARCHTERM, iar în al doilea caz, ei merg / Detaliu / libraryName. Calea este actualizată dinamic pe baza valorii curente a câmpului de intrare. De exemplu, calea devine / Lista / bootstrap când cineva tip bootstrap în primul câmp de intrare și devine / Detaliu / jquery când cineva tip jquery în al doilea câmp de introducere.
Iată codul complet al nostru home.component.html fişier:
Lista tuturor bibliotecilor
Afișați detaliile bibliotecii
Biblioteci populare
jQueryChart.jsSweetAlert
De asemenea, am creat trei cutii diferite pentru a lista numele unor biblioteci populare. Utilizatorii vor putea vizualiza direct detaliile acestor biblioteci în loc să le scrie mai întâi numele și apoi să facă clic pe Arată Biblioteca buton.
Toate aceste elemente au fost înfășurate în interiorul unui recipient div element pentru a le grupa împreună pentru stil.
După scrierea logicii componentei și crearea fișierului șablon, trebuie doar să actualizăm fișierul CSS pentru a ne face HomeComponent prezentabil.
Iată CSS-ul pe care l-am folosit pentru a modela diferite elemente din fișierul șablon. Puteți schimba toate regulile de stil aici pe baza preferințelor proprii.
div.wrapper lățime: 800px; margine: 20 pixeli automat; h3 font-size: 1.5; text-align: centru; culoare: # 666; font-familie: 'Lato'; a.simple fundal: alb; culoarea neagra; frontieră: 1px solid negru; padding: 5px 10px; font-size: 1.3rem; font-familie: 'Lato'; font-weight: 300; raza de graniță: 5px; text-decoration: nici unul; lățime: 200px; afișare: inline-block; text-align: centru; intrare border: none; margine de fund: 2px solid # 00ccff; font-size: 1.5rem; contur: nici unul; font-familie: 'Lato'; font-weight: 300; margin-dreapta: 100px; lățime: 450px; intrare: focalizare border-bottom: 2px solid # ccff00; div.library-box font-family: 'Lato'; culoare albă; fundal: violet; lățime: 200px; înălțime: 70px; text-align: centru; padding-top: 30px; font-size: 2m; raza de graniță: 4px; afișare: inline-block; margine: 20 pixeli; div.library-box: hover fundal: negru; cursor: pointer;
Totul din fișierul CSS este explicabil. Am stabilit lățimea ambalajului nostru div egală cu o valoare fixă de 800 px. Cutiile de jos cu numele bibliotecilor populare își schimbă culoarea de fundal în negru atunci când utilizatorii se deplasează peste ele.
Așa cum am menționat mai devreme, LibraryListComponent va fi folosit pentru a lista toate bibliotecile care conțin termenul de căutare extras din calea curentă. Puteți genera rapid toate fișierele necesare pentru această componentă executând următoarea instrucțiune pe linia de comandă:
ng genera lista de biblioteci componente
La fel ca și componenta noastră de acasă, această comandă va crea un dosar numit bibliotecă-listă în directorul rădăcină. În interiorul dosarului vor fi patru fișiere, dar trebuie să ne îngrijorăm doar trei: bibliotecă-list.component.css, bibliotecă-list.component.html, și bibliotecă-list.component.ts.
Vom încerca să obținem lista de biblioteci legate de termenul de căutare furnizat în URL-ul de îndată ce se încarcă componenta. Aceasta înseamnă că va trebui să importăm și noi OnInit impreuna cu component din @ Unghiular / core.
Importul ActivatedRoute ne permite să lucrăm cu toate informațiile de pe un traseu asociat componentei încărcate în prezent. În acest fel, putem extrage ușor termenul de căutare din calea curentă. După importul diferitelor dependențe de la Angular, mergem și ne importăm LibraryService clasă.
Ca de obicei, decoratorul componentelor stochează valoarea selectorului, a șablonului URL și a foilor de stil pentru LibraryListComponent.
În interiorul ngOnInit () metoda, numim getLibrary () metodă. getLibrary () metoda utilizează în continuare searchLibraries () metoda de la LibraryService pentru a obține toate rezultatele noastre. Aceste rezultate sunt apoi stocate în interiorul biblioteci matrice declarată în partea de sus a definiției noastre de clasă.
Accentsconagua
import Component, OnInit de la '@ angular / core'; import ActivatedRoute de la '@ unghiular / router'; import LibraryService de la "... /library.service"; @Component (selector: 'app-library-list', templateUrl: './library-list.component.html', styleUrls: ['./library-list.component.css']) clasa de export LibraryListComponent implementează OnInit libraries = []; constructor (rută privată: ActivatedRoute, bibliotecă privatăService: LibraryService) ngOnInit () this.getLibrary (); getLibrary (): void const bibliotecă: string = this.route.snapshot.paramMap.get ("căutare"); this.libraryService.searchLibraries (bibliotecă) .then ((date: any) => data.results.forEach (funcție (rezultat) this.libraries.push ('name': result.name, .versiune, "descriere": rezultat; descriere););); În acest tutorial, am creat cu succes HomeComponent din aplicația noastră pentru găsirea bibliotecii. Acest lucru va permite utilizatorilor să caute diferite biblioteci în baza de date CDNJS. HomeComponent nu este foarte util de la sine. Așa că vom crea alte două componente numite LibraryListComponent și LibraryDetailsComponent.
Am actualizat deja fișierul TypeScript pentru fișierul nostru LibraryListComponent. Vom actualiza șablonul HTML și fișierele CSS în tutorialul următor. Dacă aveți întrebări legate de acest tutorial, anunțați-ne în comentarii.
