Pikaopas, joka auttaa ymmärtämään ja luomaan Angular 6 -sovelluksia

Tämä viesti on jaettu kahteen osaan:

Ensimmäinen osa osoittaa, kuinka yksinkertainen Angular 6 -sovellus luodaan Angular CLI: n avulla ja selitetään projektirakenne.

Toinen osa selittää olemassa olevan koodin, jonka olen lähettänyt GitHubiin. Tämä koodi osoittaa komponenttien, palveluiden, HTTP-asiakkaan ja komponenttien välisen viestinnän käytön.

Osa 1

Asenna Node.js, jos sitä ei vielä ole

Tarvitset Node.js, koska Angularin edellyttämät kirjastot ladataan solmupaketinhallinnalla (npm). Asenna Node.js osoitteesta //nodejs.org/en/.

Asenna kulmainen CLI

Angular CLI on Angularin komentoriviliitäntä, ja se on erittäin hyödyllinen nopeasti Angular 6 -projektimallin luomisessa. Asenna Angular CLI npm -paketti maailmanlaajuisesti seuraavalla komennolla:

npm install -g @angular/cli

Luo projekti

Kulmainen CLI auttaa projektin luomisessa erittäin helposti. Luo projekti käyttämällä seuraavaa komentoa.

ng new simple-angular6-app

simple-angular6-app on projektin nimi. Nyt huomaat, että näet kansion nimeltä simple-angular6-app. Kansio on luotu projekti. Voit testata, onko kaikki asetettu oikein, siirtymällä projektikansioon ja suorittamalla sovellus seuraavilla komennoilla:

cd simple-angular6-app npm start

Siirry selaimeesi ja siirry seuraavaan URL-osoitteeseen: localhost: 4200. Sinun pitäisi pystyä näkemään, että sovelluksesi on käynnissä.

Sovellus näyttäisi tältä:

Kansion perusrakenne selitetty

Kun luot projektin, huomaat, että se luo joukon tiedostoja. Tässä luetellaan joitain tärkeitä tiedostoja ja kansioita, joista sinun pitäisi olla tietoinen:

  1. package.json: Tässä tiedostossa on luettelo tarvittavista solmujen riippuvuuksista.
  2. src / styles.css : Tällä tiedostolla on maailmanlaajuinen CSS käytettävissä koko sovelluksessa.
  3. src / main.ts : Tämä on päätiedosto, joka käynnistää kulmasovelluksen (AppModule käynnistetään tässä koodin mukaisesti). Tässä Extension .ts tarkoittaa TypeScriptiä.
  4. src / index.html : Tämä on ensimmäinen tiedosto, joka suoritetaan main.ts: n rinnalla, kun sivu latautuu.
  5. src / app / app.module.ts : Tämä on tiedosto, jossa kaikki komponentit, tarjoajat ja moduulit on määritelty. Määrittelemättä niitä täällä niitä ei voida käyttää muualla koodissa.
  6. src / app / app.component.html: Tämä on kulmasovelluksen pääkomponentti, ja kaikki muut komponentit ovat yleensä läsnä tässä komponentissa. src / app / app.component.ts on tämän komponentin logiikka, ja src / app / app.component.css on tämän komponentin CSS. Tämä komponentti itsessään ei tee mitään tärkeää logiikkaa, mutta toimii muiden komponenttien säilönä.
  7. dist : Tässä kansiossa ovat rakennetut tiedostot. TypeScript muunnetaan periaatteessa JavaScriptiksi ja tuloksena olevat tiedostot tallennetaan tähän niputtamisen ja pienentämisen jälkeen. (Tämä kansio näkyy vain, jos sovellus on rakennettu. Yksinkertainen "npm start" ei luo tätä kansiota.) Koska selaimet ymmärtävät vain JavaScriptiä (ainakin toistaiseksi), on siksi tarpeen muuntaa TypeScript JavaScriptiksi ennen koodin käyttöönottoa . Jos haluat nähdä tämän kansion, kirjoita seuraava komentokehotteeseen:
npm run build

On myös useita muita tiedostoja, mutta näiden perustietojen tunteminen on hyvä aluksi

TypeScript

Angular 6 käyttää TypeScriptiä logiikan toteuttamiseen. Niille teistä, jotka ovat työskennelleet Javassa, TypeScript on erittäin helppo. TypeScript on JavaScriptin päälle rakennettu kieli, joka on tyypiltään turvallinen, ja TypeScript puolestaan ​​kääntää JavaScriptiksi

Komponenttien ja palveluiden luominen

  1. Komponentti : Komponentti Angularissa suorittaa tietyn toiminnon. Kulmasovellus rakennetaan käyttämällä erilaisia ​​komponentteja. Kulmallista CLI: tä voidaan käyttää komponenttien luomiseen helposti. Syntaksi on ng generoida komponentti [nimi]. Luo komponentti nimeltä "asiakkaat" seuraavan komennon avulla.
ng generate component customers

2. Yllä oleva komento luo kansion nimeltä asiakkaat sisäpuolelle src / app . Luodulla komponentilla on:

  • a customers.component.html -tiedosto mallin valitsemiseksi (miten komponentin käyttöliittymän tulisi näyttää)
  • customers.component.ts tiedosto, joka on silloin, kun logiikka on läsnä
  • customers.component.css tiedosto, joka on CSS sisältöä
  • ja asiakas.komponentti.spec.ts- tiedosto, jota käytetään yksikkötestauksessa (tekniset tiedot selitetään tässä viestissä).

3. Palvelu : Palvelu tarjoaa periaatteessa toimintoja, joita kaikki komponentit voivat käyttää. Palvelu voidaan jakaa kaikkien komponenttien kesken tai se voidaan rajoittaa tiettyyn komponenttiin (mikä tahansa uudelleenkäytettävä logiikka voidaan laittaa palveluun). Kulmallista CLI: tä voidaan käyttää myös palvelujen luomiseen. Syntaksi on ng generoi palvelu [nimi]. Luo palvelu, jota kutsutaan nimellä data, seuraavalla komennolla:

ng generate service data

4. Palvelu luodaan src / app. Luodulla palvelulla on data.service.ts- tiedosto, jolla on logiikka, ja data.service.spec.ts- tiedosto yksikötestausta varten.

Onnittelut ?

Olet onnistuneesti luonut ensimmäisen Angular 6 -sovelluksesi ja oppinut myös luomaan komponentteja ja palveluita. Myös nyt olet oppinut Angular 6 -projektin kansiorakenteen. Seuraava osa selittää nykyisen GitHub-koodin osien, palveluiden, HTTP-asiakkaan ja komponenttien välisen viestinnän käyttämiseksi.

Osa 2

Koodi

Tätä koodia selitetään täällä, joten kloonaa repo paikalliselle koneellesi. Repolla on ohjeet sen kloonaamiseen ja asettamiseen.

Sovelluksen URL-osoite

Voit napsauttaa tätä URL-osoitetta nähdäksesi miltä lopullinen hakemus näyttää. Tämä antaa sinulle hyvän käsityksen siitä, mitä sovellus yrittää tehdä.

Sovellus näyttäisi tältä mobiilinäytöllä:

Mitä tämä sovellus tekee?

Sovelluksen tavoitteena on näyttää luettelo asiakkaista korttien muodossa. Kun asiakastietoja napsautetaan, sovellus siirtyy uudelle sivulle, joka näyttää valitun asiakkaan tiedot.

Sovelluksen rakenne selitetty

Luodut komponentit ovat:

  1. Asiakaskomponentti : Tämä vastaa src / app / customers- kansiota. Tämän komponentin on tarkoitus näyttää asiakkaiden luettelo. Asiakkaat.komponentti . Tstiedostolla on funktio nimeltä ngOnInit () . Tätä toimintoa kutsutaan aina, kun komponentti ladataan. Joten tätä toimintoa voidaan käyttää komponentin tietojen lataamiseen. Nämä tiedot ladataan kutsumalla getCustomerList () -funktiota. getCustomerList () puolestaan ​​kutsuu datapalvelua saadakseen tarvittavat tiedot.
  2. CustomerdetailsComponent : Tämä vastaa src / app / customerdetails- kansiota. Tämä komponentti näyttää yhden valitun asiakkaan tiedot. Customerdetails.component.ts tiedosto on ngOnInit () funktio, joka voidaan ladata tietoja. Tietojen lataamiseksi kutsutaan getCustomerDetails () -funktiota. Tämä toiminto soittaa datapalveluun saadakseen tarvittavat tiedot. Mutta tässä huomaat myös reittiParams.id: n käytön, joka lähetetään palvelulle. routeParamsia käytetään parametrien hakemiseen sovelluksen URL-osoitteesta ja tunnuksestaparametria käytetään selvittämään, kenelle asiakkaalle tiedot on ladattava. Tämä käy selvemmäksi, kun pääsen reititysosaan.
  3. DisplayComponent : Tämä vastaa src / app / display- kansiota. Tämä komponentti näyttää asiakkaan nimen, jota napsautetaan Asiakaskomponentissa. (Tämän komponentin pääkohdana on osoittaa vanhemman ja lapsen välisen viestinnän.) Tämä on CustomersComponentin alikomponentti . in customers.component.htmlhuomaat sen .Tämä tekee DisplayComponentista CustomersComponentin alikomponentin . Data on siirtynyt CustomerComponent ja DisplayComponent käyttäen [asiakas] määrite.

Näytetiedot

Esimerkkitiedot ovat src / asset / samplejson- kansiossa.

Luodut palvelut ovat:

  1. DataService : Tämä vastaa src / app / data.service.ts . Kaikki sovelluksessa käytetyt JSON-tiedostot tallennetaan src / asset / samplejson- kansioon. DataService auttaa saamaan JSON-tiedostoja src / asset / samplejson- kansiosta HTTP-pyynnön avulla. Todellisissa sovelluksissa palvelu auttaa saamaan tietoja Rest-sovellusliittymästä tai muusta sovellusliittymästä tekemällä HTTP-pyynnön. Tätä palvelua käyttää sekä Asiakaskomponenttija AsiakastiedotKomponentti.

Käytetyt malliluokat ovat:

  1. Asiakas : Tämä vastaa src / app / customer.ts . Tätä malliluokkaa käytetään Asiakaskomponenttiin kunkin asiakkaan rakenteen määrittelemiseksi luettelossa.
  2. CustomerDetails : Tämä vastaa tiedostoa src / app / customerdetails.ts . Tätä malliluokkaa käytetään CustomerdetailsComponentissa määrittelemään rakenne, joka sisältää kaikki asiakastiedot.

Reititysmoduuli

Reititysmoduuli on määritelty osoitteessa src / app / app-routing.module.ts . Tätä moduulia sovelletaan sitten sovellukseen lisäämällä app.component.html.

Sovelluksessa on 2 reittiä:

  1. / asiakkaat : Tämä URL-osoite näyttää asiakasluettelon ja osoittaa asiakaskomponentin.
  2. / customerdetails /: id : Tämä URL-osoite näyttää kunkin asiakkaan tiedot ja osoittaa kohtaan CustomerdetailsComponent . Tässä URL-osoitteessa oleva tunnus on routeParam. Tämä tunnuspuolestaan Asiakasdetailikomponentti tietää, minkä asiakkaan tiedot näytetään. Esimerkiksi Esimerkki / asiakastiedot / 1 näyttää ensimmäisen asiakkaan tiedot, / asiakastiedot / 3 näyttää kolmannen asiakkaan tiedot ja niin edelleen.

Onnittelut taas ?

Nyt osaat käyttää komponentteja ja palveluita. Tiedät myös kuinka soittaa HTTP-puheluita, kuinka käyttää reititystä ja kuinka välittää routeParams.

Peruskäsitteet on käsitelty tässä viestissä, ja toivon, että siitä oli hyötyä.

Viitteet:

  1. Jos haluat tietää enemmän Angularista, tarkista dokumentaatio //angular.io/guide/quickstart. Dokumentaatio on erittäin hyvä ymmärtämään muita kulmakäsitteitä

Kirjailijasta

Rakastan tekniikkaa ja seuraan tekniikan kehitystä. Pidän myös muiden auttamisesta kaikilla tiedoilla, joita minulla on teknologia-alueella.

Ota rohkeasti yhteyttä minuun LinkdIn-tililläni //www.linkedin.com/in/aditya1811/

Voit myös seurata minua twitterissä //twitter.com/adityasridhar18

Oma verkkosivustoni: //adityasridhar.com/

Muita aiheeseen liittyviä viestejä

Pikaopas auttaa ymmärtämään ja luomaan ReactJS-sovelluksia

Pika esittely Vue.js: iin