Share
Kantet har blitt veldig populært de siste par årene. Du kan bruke denne open-source JavaScript-rammen for å bygge web- og mobilapper. Hvis du har tenkt på å lære Angular, men vet ikke hvor du skal begynne, kan denne serien være en god ide.
Målet med denne serien er å dekke grunnlaget for Angular mens du lager en veldig enkel app som viser informasjon om forskjellige land. Vinkel er skrevet i TypeScript, så det er fornuftig at du skriver din egen kode i TypeScript også.
Det er ikke nødvendig å bekymre deg hvis du aldri har brukt TypeScript før. For å si det enkelt, er TypeScript bare skrevet JavaScript med tilleggsfunksjoner. Jeg har også skrevet en serie med tittelen TypeScript for Beginners på Envato Tuts +, hvor du kan lære grunnleggende om TypeScript først.
Hvis du allerede er kjent med TypeScript, kan du bare fortsette og begynne å lage din første Angular app.
Det første trinnet ville være å installere Node.js. Du kan gå til den offisielle nettsiden og laste ned den riktige versjonen. Noden pakkebehandling vil bli installert som en del av Node.js.
Det neste trinnet er å installere TypeScript ved å kjøre følgende kommando. Jeg anbefaler at du installerer en TypeScript-versjon over 2.1.
npm installer -g typescript
Til slutt må du installere Angular CLI ved å kjøre følgende kommando. Installere Angular CLI vil gjøre prosessen med å skape Angular app enklere.
npm installer -g @ vinkel / cli
Nå kan du opprette en ny Angular-app rett ut av boksen ved å kjøre følgende kommando inne i terminalen. Før du kjører kommandoen, må du kontrollere at du har flyttet til katalogen der du vil opprette appen.
ng nytt land-app
Installere alle avhengighetene til prosjektet tar litt tid, så vær så tålmodig mens Angular CLI setter opp appen din. Etter at installasjonen er fullført, vil du se en navngitt mappe country-app i gjeldende katalog. Du kan kjøre appen din nå, ved å endre katalogen til country-app og deretter kjører ng tjene i konsollen.
cd land-app ng tjene --open
legge --åpen vil automatisk åpne appen din i nettleseren på http: // localhost: 4200 /.
Landinformasjonsappen som vi oppretter vil ha tre komponenter. De HomeComponent vil vise de tre beste landene under ulike kategorier som befolkning, BNP og område. Du vil kunne klikke navnet på hvert land for å lese mer om det. Ytterligere informasjon om landet er oppført ved hjelp av en annen komponent, som vi skal ringe til CountryDetailComponent. Det vil være en komponent i vår app, som vil bli brukt til å vise en liste over alle landene vi har lagret i vår app.
Siden dette er din første Angular app, vil vårt hovedmål være å holde ting enkelt uten å legge til komplisert funksjonalitet. Når du har en god forståelse av det grunnleggende, vil det ikke virke som en skremmende oppgave å skape mer komplekse apper.
Bildet nedenfor er på hjemmesiden eller HomeComponent i vårt land informasjon app. Som du ser, er det tre land under hver kategori, og de har blitt plassert i synkende rekkefølge. Mens du lager HomeComponent, Du vil lære å sortere forskjellige land før du viser dem i malen.
Følgende bilde viser "alle landssiden" eller AllCountriesComponent av vår app. Oppsettet av denne komponenten er veldig lik den HomeComponent. Den eneste forskjellen er at denne gangen vi opplister alle landene sammen med deres hovedstader.
Hvis du klikker på boksen til et hvilket som helst land gjengitt inne i enten HomeComponent eller AllCountriesComponent, Du vil bli tatt til landedetaljer siden eller CountryDetailComponent. Informasjonen om et land kan ikke redigeres.
Det er en tilbakeknapp etter detaljene i hvert land. Denne tilbakeknappen tar deg tilbake til forrige komponent eller side. Hvis du kom til CountryDetailComponent fra HomeComponent, Du vil bli tatt tilbake til HomeComponent. Hvis du kom til CountryDetailComponent fra AllCountriesComponent, Du vil bli tatt tilbake til AllCountriesComponent.
Å referere til ulike komponenter som vi lager som sider, er ikke teknisk korrekt. Imidlertid bruker jeg vilkår som startside eller HomeComponent Utveksling fordi å se mange ukjente vilkår som ruting, komponenter og dekoratører kan være skremmende for lesere som aldri har opprettet en Angular app før. Bruk av disse vilkårene løst for denne serien kan hjelpe deg med å lære raskt i stedet for å bli forvirret av sjargongen.
Før vi begynner å lage vår app, må du være komfortabel med de grunnleggende begreper angular. Denne delen vil kortfattet dekke viktige temaer som komponenter og maler.
Komponenter er byggeblokkene i en vinkelapp. De lar deg kontrollere brukergrensesnittet til appen din. En grunnleggende komponent består av to deler: en dekoratør og en klasses Definisjon. Du kan angi programlogikken for en komponent inne i klassen.
Komponentdekoratoren brukes til å spesifisere informasjon som en tilpasset väljare for å identifisere komponenten, banen til HTML-malen, og stilreglene som skal brukes på komponenten.
Her er en grunnleggende komponent dekorator som setter alle tre verdiene for CountryDetailComponent:
@Component (selector: 'app-country-detail', templateUrl: './country-detail.component.html', styleUrls: ['./country-detail.component.css'])
Alle komponentene som vi oppretter, vil ha en tilpasset velg som spesifiserer taggen som gjør komponenten inne i nettleseren. Disse egendefinerte kodene kan ha noe navn du vil ha. For eksempel vil vi skape en countryDetailComponent i den tredje opplæringen av serien, og vi vil bruke vår egen tilpassede tag som heter app-country-detalj å gjengi denne komponenten i nettleseren.
Enhver komponent du oppretter vil bestå av en mal som styrer hva som gjøres på applikasjonssiden. For eksempel, countryDetailComponent har to div koder som fungerer som en wrapper rundt hovedinnholdet i komponenten. Hvert stykke informasjon om et land blir satt inn i seg selv p tag, og navnet på landet er satt inn i en h2 stikkord. Alle disse kodene kan lagres sammen som en mal for countryDetailComponent og deretter gjengitt som en enhet. Denne malen av komponenten kan lagres som en HTML-fil eller spesifisert direkte inne i dekoratoren ved hjelp av mal Egenskap.
Ulike komponenter i appen vår må hente dataene som skal vises på skjermen. Vi skal opprette en tjenesteklasse som vil inneholde funksjoner for å hjelpe oss med å hente disse dataene, og sortere eller endre den på en eller annen måte. Vi vil da bruke funksjonaliteten til ulike komponentklasser for å vise disse dataene til brukeren.
Du kan vurdere en Service å bare være noen verdi, funksjon eller funksjon som søknaden din trenger. Å få alle landene som er lagret i vår søknad, er en tjeneste, og så sorterer og viser dem. Alle de tre komponentene i vår klasse bruker funksjoner fra vår tjeneste for å hente data.
Når du lager komponenter for appen din, må du importere avhengigheter fra forskjellige moduler. For eksempel vil vi importere Komponent fra @ Vinkel / kjerne når vi lager en egen komponent. Du kan også bruke samme syntaks for å importere avhengigheter som ble opprettet av deg. Delen inne krøllete parentes brukes til å angi avhengigheten du vil importere, og delen etter fra brukes til å spesifisere hvor Angular kan finne avhengigheten.
Her er en kodebit fra country-app at vi skal skape. Som du ser, importerer vi Komponent og OnInit fra @ Vinkel / kjerne. På samme måte importerer vi en Land og CountryService fra filer som vi opprettet oss selv.
importer Komponent, OnInit fra '@ vinkel / kjerne'; importer Country fra '... / country'; importer CountryService fra '... /country.service';
Etter at du kjørte ng nytt land-app kommandoen, skapte Angular CLI en masse filer og mapper for deg. Å se så mange filer kan være skremmende som en nybegynner, men du trenger ikke å jobbe med alle disse filene. Når vi lager vår landapp, vil vi bare endre filene som allerede eksisterer inne i src / app mappe, samt å lage nye filer i samme katalog. Akkurat nå bør du ha fem forskjellige filer i src / app mappe. Disse filene oppretter et applikasjonsskall som brukes til å sette sammen resten av appen vår.
De app.component.ts filen inneholder logikken for komponenten vår skrevet i TypeScript. Du kan åpne denne filen og oppdatere tittel eiendom av AppComponent klasse til "Fun Facts About Countries". De app.component.ts filen skal nå ha følgende kode.
importer Komponent fra '@ vinkel / kjerne'; @Component (selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']) eksportklasse AppComponent title = 'Morsomme fakta om land ';
De app.component.html filen inneholder malen for vår AppComponent klasse. Åpne app.component.html fil og erstatt HTML-koden for boilerplate inne i den med følgende linje:
tittel
Ved innpakning tittel inne i de krøllete parentesene, forteller vi Angular å sette verdien av tittel eiendom av AppComponent klasse inne i h1 stikkord.
Vi oppdaterer denne filen i den siste opplæringen til serien for å gjengi nye komponenter som vi skal skape. For nå må det bare vise tittelen på vår app.
Endringene som er gjort i denne filen, reflekteres automatisk i nettleseren på http: // localhost: 4200 /. Bare vær sikker på at konsollen er åpen og du har allerede skrevet inn ng tjene kommandoen fra begynnelsen av opplæringen.
Ulike funksjoner og funksjoner i appen styres av flere enklere komponenter som vi vil lage senere. Du kan tenke på dette applikasjonsskallet som en bil og forskjellige komponenter som vi vil lage som deler av bilen som motoren og hjulene. Hver komponent vil utføre sin spesifikke funksjon, og du kan sette dem sammen for å lage hele bilen.
Målet med denne opplæringen var å hjelpe deg med å installere alle nødvendige verktøy som du trenger for å lage en vinkelapp og raskt gå over noen grunnleggende vinkelbegrep.
For å oppsummere må du vite grunnleggende om TypeScript før du kan opprette en Angular app. I neste trinn må du installere Node.js, TypeScript og Angular CLI. Etter det kan du bare kjøre en rekke kommandoer fra Komme i gang-delen av denne opplæringen, og din første Angular-app vil være oppe.
Vårt land app vil gjøre mye mer enn bare vise tittelen. I neste veiledning vil du opprette noen klasser og tjenester som vil bli brukt til å lagre og hente data om forskjellige land. Disse klassene og tjenestene vil være nyttige i tredje og fjerde opplæringsprogrammet, der vi skal opprette forskjellige komponenter i vår app.
Mens vi jobber gjennom denne opplæringsserien, ikke glem å sjekke ut Envato Market for å se hva som er tilgjengelig for bruk og studie for både Angular og JavaScript, generelt.
Accentsconagua