En hurtig guide til at hjælpe dig med at forstå og oprette Angular 6-apps

Dette indlæg er opdelt i to dele:

Den første del demonstrerer, hvordan man opretter en simpel Angular 6-app ved hjælp af Angular CLI og forklarer projektstrukturen.

Den anden del forklarer eksisterende kode, som jeg har sendt i GitHub. Denne kode demonstrerer brugen af ​​komponenter, tjenester, HTTP-klient og kommunikation mellem komponenter.

Del 1

Installer Node.js, hvis den ikke allerede findes

Du har brug for Node.js, da de biblioteker, der kræves til Angular, downloades ved hjælp af node-pakkehåndtering (npm). Se //nodejs.org/en/ for at installere Node.js.

Installer Angular CLI

Angular CLI er en kommandolinjegrænseflade til Angular og er meget nyttig til hurtigt at oprette en Angular 6-projektskabelon. Installer Angular CLI npm-pakken globalt ved hjælp af følgende kommando:

npm install -g @angular/cli

Opret projektet

Angular CLI hjælper med at oprette et projekt meget let. Brug følgende kommando for at oprette projektet.

ng new simple-angular6-app

simple-angular6-app er projektets navn. Nu vil du bemærke, at du ser en mappe med navnet simple-angular6-app. Mappen er det projekt, der er oprettet. For at teste, om alt er indstillet korrekt, skal du gå ind i projektmappen og køre applikationen ved hjælp af følgende kommandoer:

cd simple-angular6-app npm start

Gå til din browser, og gå til følgende URL: localhost: 4200. Du skal kunne se, at din applikation kører.

Ansøgningen vil se sådan ud:

Grundlæggende mappestruktur forklaret

Når du opretter projektet, vil du bemærke, at det opretter en masse filer. Her viser jeg nogle af de vigtige filer og mapper, som du skal være opmærksom på:

  1. package.json: Denne fil har listen over nodeafhængigheder, som er nødvendige.
  2. src / styles.css : Denne fil har den globale CSS tilgængelig i hele applikationen.
  3. src / main.ts : Dette er hovedfilen, der starter Angular Application (AppModule startes her som set i koden). Her står Extension .ts for TypeScript.
  4. src / index.html : Dette er den første fil, der udføres sammen med main.ts, når siden indlæses.
  5. src / app / app.module.ts : Dette er filen, hvor alle komponenter, udbydere og moduler er defineret. Uden at definere dem her kan de ikke bruges andre steder i koden.
  6. src / app / app.component.html: Dette er hovedkomponenten i en vinkelapp, og alle andre komponenter er normalt til stede i denne komponent. src / app / app.component.ts er logikken for denne komponent, og src / app / app.component.css er CSS for denne komponent. Denne komponent i sig selv udfører ingen vigtig logik, men fungerer som en beholder for andre komponenter.
  7. dist : Denne mappe er, hvor de indbyggede filer er til stede. TypeScript konverteres grundlæggende til JavaScript, og de resulterende filer gemmes her efter bundling og minificering. (Denne mappe vises kun, hvis applikationen er bygget. En simpel "npm-start" opretter ikke denne mappe.) Da webbrowsere kun forstår JavaScript (i det mindste i øjeblikket), er det derfor nødvendigt at konvertere TypeScript til JavaScript, før koden implementeres . For at se denne mappe kan du skrive følgende i kommandoprompten:
npm run build

Der er også flere andre filer, men det er godt at starte med at kende disse grundlæggende

TypeScript

Angular 6 bruger TypeScript til implementering af logikken. De af jer, der har arbejdet i Java, vil finde TypeScript meget let. TypeScript er et sprog bygget oven på JavaScript, men som er typesikkert, og TypeScript kompilerer igen til JavaScript

Oprettelse af komponenter og tjenester

  1. Komponent : En komponent i Angular har en bestemt funktion. En kantet applikation er bygget ved hjælp af forskellige komponenter. Vinklet CLI kan bruges til nemt at oprette komponenter. Syntaksen er ng generer komponent [navn]. Brug følgende kommando til at oprette en komponent kaldet “kunder”.
ng generate component customers

2. Ovenstående kommando opretter en mappe kaldet kunder inde i src / app . Den oprettede komponent har:

  • en clients.component.html- fil til at bestemme skabelonen (hvordan komponent-UI skal se ud)
  • en clients.component.ts- fil, hvor logikken er til stede
  • en clients.component.css- fil, der har CSS-indhold
  • og en clients.component.spec.ts- fil, der bruges til test af enheder (specifikationen forklares ikke i dette indlæg).

3. Service : En service giver grundlæggende funktionalitet, som kan bruges af enhver komponent. Tjenesten kan deles på tværs af alle komponenter, eller den kan begrænses til en bestemt komponent (enhver genanvendelig logik kan placeres i en tjeneste). Vinklet CLI kan også bruges til at oprette tjenester. Syntaksen er ng generer service [navn]. Brug følgende kommando til at oprette en tjeneste kaldet "data":

ng generate service data

4. Tjenesten oprettes i src / app. Den oprettede tjeneste har en data.service.ts- fil, der har logikken og en data.service.spec.ts- fil til enhedstest.

Tillykke ?

Du har oprettet din første Angular 6-app og har også lært, hvordan du opretter komponenter og tjenester. Også nu har du lært den grundlæggende mappestruktur i et Angular 6-projekt. Den næste del forklarer den eksisterende GitHub-kode for at demonstrere, hvordan man bruger komponenter, tjenester, HTTP-klient og kommunikation mellem komponenter.

Del 2

Kode

Denne kode forklares her, så klon repoen på din lokale maskine. Repoen har instruktioner om, hvordan man kloner den og opsætter den.

Ansøgnings-URL

For at se, hvordan den endelige ansøgning ser ud, kan du klikke på denne URL. Dette giver dig en god idé om, hvad applikationen forsøger at gøre.

Applikationen ser sådan ud på en mobilskærm:

Hvad gør denne applikation?

Målet med applikationen er at vise en liste over kunder i form af kort. Når der klikkes på kundedataene, skifter applikationen til en ny side, som derefter viser detaljerne for den valgte kunde.

Applikationsstruktur forklaret

Komponenterne er oprettet:

  1. Kundekomponent : Dette svarer til mappen src / app / kunder . Denne komponent skal vise listen over kunder. de customers.component.tsfilen har en funktion kaldet ngOnInit () . Denne funktion kaldes, når komponenten er indlæst. Så denne funktion kan bruges til at indlæse dataene for komponenten. Disse data indlæses ved at kalde funktionen getCustomerList () . getCustomerList () kalder igen datatjenesten for at få de nødvendige data.
  2. CustomerdetailsComponent : Dette svarer til mappen src / app / customerdetails . Denne komponent viser detaljerne for en enkelt valgt kunde. Den customerdetails.component.ts fil har ngOnInit () funktion, som kan bruges til at indlæse data. For at indlæse data kaldes funktionen getCustomerDetails () . Denne funktion ringer til datatjenesten for at få de nødvendige data. Men her vil du også bemærke brugen af routeParams.id, som sendes til tjenesten. routeParams bruges til at hente parametre fra applikations-URL'en og id'etparameter bruges til at finde ud af for hvilken kunde detaljerne skal indlæses. Dette bliver mere tydeligt, når jeg kommer til routing-delen.
  3. DisplayComponent : Dette svarer til mappen src / app / display . Denne komponent viser det kundenavn, der er klikket på i Kundekomponenten. (Hele pointen for denne komponent er at demonstrere kommunikation fra komponent mellem forældre og børn.) Dette er en underordnet komponent i CustomersComponent . I kunder.komponent.htmldet vil du bemærke .Dette gør DisplayComponent til en underordnet komponent af CustomersComponent . Data videregives fra CustomerComponent til DisplayComponent ved hjælp af attributten [customer] .

Eksempeldataene

Eksempeldataene findes i mappen src / assets / samplejson .

De oprettede tjenester er:

  1. DataService : Dette svarer til src / app / data.service.ts . Al JSON, der bruges i applikationen, gemmes i mappen src / assets / samplejson . DataService hjælper med at hente JSON fra mappen src / assets / samplejson ved hjælp af en HTTP-anmodning. I rigtige applikationer hjælper tjenesten med at få data fra en Rest API eller enhver anden API ved at lave en HTTP-anmodning. Denne service bruges af både CustomersComponentog CustomerdetailsComponent.

De anvendte modelklasser er:

  1. Kunde : Dette svarer til src / app / customer.ts . Dette er den modelklasse, der bruges til CustomersComponent til at definere strukturen for hver kunde på listen.
  2. CustomerDetails : Dette svarer til src / app / customerdetails.ts . Dette er den modelklasse, der bruges til CustomerdetailsComponent til at definere strukturen, der indeholder alle kundeoplysninger.

Routing-modul

Rutemodulet er defineret i src / app / app-routing.module.ts . Dette modul anvendes derefter til applikationen ved at tilføje i app.component.html.

Der er 2 ruter til stede i applikationen:

  1. / kunder : Denne URL viser kundelisten og peger på CustomersComponent.
  2. / customerdetails /: id : Denne URL viser detaljerne for hver kunde og peger på CustomerdetailsComponent . Den id , der er til stede i denne URL er routeParam. Dette idtil gengæld bruges af CustomerdetailsComponent til at vide, hvilken kundes detaljer der skal vises. For eksempel / customerdetails / 1 viser detaljerne for den første kunde, / customerdetails / 3 viser detaljerne for den 3. kunde osv.

Tillykke igen ?

Nu ved du, hvordan du bruger komponenter og tjenester. Du ved også, hvordan man foretager HTTP-opkald, hvordan man bruger routing, og hvordan man videresender routeParams.

De grundlæggende begreber er blevet dækket i dette indlæg, og håber, det var nyttigt.

Referencer:

  1. For at vide mere om Angular kan du tjekke dokumentationen //angular.io/guide/quickstart. Dokumentationen er meget god til at forstå yderligere begreber vinkelret

Om forfatteren

Jeg elsker teknologi og følger teknologiens fremskridt. Jeg kan også godt lide at hjælpe andre med al viden, jeg har i teknologirummet.

Du er velkommen til at oprette forbindelse til mig på min LinkdIn-konto //www.linkedin.com/in/aditya1811/

Du kan også følge mig på twitter //twitter.com/adityasridhar18

Mit websted: //adityasridhar.com/

Andre relaterede indlæg af mig

En hurtig guide til at hjælpe dig med at forstå og oprette ReactJS-apps

En hurtig introduktion til Vue.js