Kuva Aphinya Dechalert. Otsikko: Punainen hirviö oppiminen kulma

19 asiaa, jotka sinun täytyy oppia tullaksesi tehokkaaksi kulmakehittäjäksi

Kattava opas siitä, miten tulla progeksi Angularissa

Tehtäväsovellus vastaa 'Hello world' -sovellusta käyttöliittymäkehitykseen. Vaikka se kattaa sovelluksen luomisen CRUD-näkökohdan, se naarmuttaa usein vain sen pinnan, mitä kehys tai kirjasto voi tehdä.

Kulma näyttää aina muuttuvan ja päivittyvän - mutta todellisuudessa on tiettyjä asioita, jotka pysyvät samana. Tässä on piilotettu ydinkonsepteista, jotka sinun on opittava kulmikkaan suhteen, jotta JavaScript-kehys saadaan hyödynnettyä kunnolla.

Kulmasta on paljon opittavaa, ja monet meistä takertuvat aloittelijan piiriin yksinkertaisesti siksi, että emme tiedä minne mennä tai mitä etsiä. Tämä on kattava opas (ja nopea yhteenveto itsestäsi Angularista), jonka toivotin saaneeni, kun aloitin ensin Angular 2+: lla.

1. Modulaarinen kulma-arkkitehtuuri

Teoriassa voit laittaa kaikki kulmakoodisi yhdelle sivulle ja yhdelle massiiviselle toiminnolle, mutta sitä ei suositella, eikä se ole myöskään tehokas tapa rakentaa koodiasi ja kukistaa nurkan olemassaolon tarkoitusta.

Angular käyttää moduulien käsitettä voimakkaasti osana kehyksen arkkitehtuuria. Tämä viittaa koodikokoelmaan, jolla on yksi syy olemassa olevaan. Kulma-sovelluksesi koostuu pääosin moduuleista - osa itsenäinen ja osa jaettu.

Moduuleja voi rakentaa sovelluksessasi monella tapaa, ja myös erilaisten arkkitehtonisten rakenteiden tutkiminen voi auttaa määrittämään, kuinka skaalaat sovellustasi sen kasvaessa. Se voi myös auttaa eristämään koodisi ja estämään koodiliitoksen muodostumisen.

Mitä Googlelle:

  • Kulma-arkkitehtuurikuviot
  • Skaalautuva kulmainen sovellusarkkitehtuuri

Ostan aiheeni:

  • Mitä tarkoittaa kulman modulaarinen arkkitehtuuri edes?

2. Yksisuuntainen tiedonkulku ja muutettavuus

Paluu kulmaan 1, kaksisuuntainen sidonta valloitti monien etuosakehittäjien sydämet. Se oli lähinnä yksi Anlegen alkuperäisistä myyntikohdista. Ajan myötä se alkoi kuitenkin aiheuttaa ongelmia suorituskyvyn suhteen, kun sovellus alkoi monimutkaistua.

Osoittautuu, että et oikeastaan ​​tarvitse kaksisuuntaista sidontaa kaikkialle.

Kaksisuuntainen sidonta on edelleen mahdollista kulmassa 2+, mutta vain kun kehittäjä sitä nimenomaisesti pyytää - pakottaen koodin takana olevan henkilön ajattelemaan tietonsa suuntaa ja virtausta. Se mahdollistaa myös sovelluksen joustavuuden datan kanssa määrittämällä, kuinka datan tulisi kulkea.

Mitä Googlelle:

  • Kulmaisen tiedonkulun parhaat käytännöt,
  • Yksisuuntainen virtaus kulmassa,
  • Yhdensuuntaisen sitomisen edut

Ostan aiheeni:

  • Tarina yksisuuntaisesta tiedonkulusta kulmassa

3. Ominaisuusdirektiivi ja rakenteelliset direktiivit

Direktiivi on HTML-laajennus mukautettujen elementtien avulla. Ominaisuusdirektiivien avulla voit muuttaa elementin ominaisuuksia. Rakenteelliset direktiivit muuttavat asettelua lisäämällä tai poistamalla elementtejä DOM: sta.

Esimerkiksi ngSwitch ja ngIf ovat rakenteellisia direktiivejä, koska se arvioi parametrit ja määrittää, onko DOM: n osien olemassa vai ei.

Ominaisuusdirektiivit ovat elementtien, komponenttien tai muiden direktiivien liitteenä olevia mukautettuja käyttäytymismalleja.

Näiden kahden direktiivin käytön oppiminen voi laajentaa sovelluksesi ominaisuuksia ja vähentää kaksoiskappaleiden määrää projektissa. Attribuutidirektiivit voivat myös auttaa keskittämään tiettyjä käyttäytymistä, joita käytetään sovelluksen eri osissa.

Mitä Googlelle:

  • Kulmaominaisuusdirektiivit,
  • Kulmarakenteiset direktiivit
  • Kulmarakenteiset direktiivikuviot

4. Komponenttien elinkaarikoukut

Jokaisella ohjelmistolla on oma elinkaari, joka määrittelee miten jokin luodaan, kuvataan ja sitten poistetaan. Kulmassa on komponentin elinkaari, joka menee noin:

luoda → tehdä → tehdä lapsia → tarkistaa, kun tietoihin sidotut ominaisuudet muuttuvat → tuhota → poistaa DOM: sta

Meillä on kyky kiinnittää tärkeimmät hetket tämän syklin sisällä ja kohdistaa se tiettyihin hetkiin tiettyyn ajankohtaan tai tapahtumaan. Tämän avulla voimme luoda asianmukaisia ​​vastauksia ja määrittää käyttäytymisen komponentin olemassaolon eri vaiheiden mukaan.

Saatat joutua esimerkiksi lataamaan joitain tietoja ennen sivun renderointia. Voit tehdä tämän kautta ngOnInit (). Tai ehkä sinun on irrotettava tietokannasta. Tämä voidaan tehdä ngOnDestroy () -sovelluksella.

Mitä Googlelle:

  • Kulmaiset elinkaarikoukut
  • Komponenttien elinkaari

5. Http- ja havaittavat palvelut

Tämä ei ole oikeastaan ​​kulmakohtainen ominaisuus, vaan pikemminkin jotain ES7: stä. Kulma juuri toteutettiin sen toteuttamiseksi osana kehyksen tukitoimintoja ja ymmärtää tämän kääntävän myös Reakt, Vue ja kaikki JavaScriptiin liittyvät kirjastot tai puitteet.

Havaittavat palvelut ovat malleja, joiden avulla voit käsitellä tietoja tehokkaasti - jolloin voit jäsentää, muokata ja ylläpitää tietoja tapahtumapohjaisessa järjestelmässä. Et voi todella paeta Http: stä ja havainnoitavissa olevista kohteista, koska kaikki on tietoa.

Mitä Googlelle:

  • JavaScriptin havaittavissa olevat mallit
  • Kulmainen HTTP ja havainnoitavat
  • ES7: n havaittavissa oleva ominaisuus

6. Älykäs / tyhmä komponenttiarkkitehtuuri

Kun kirjoitamme kulmasovelluksiamme, pyrimme yleensä laittamaan kaiken komponenttiin. Se ei kuitenkaan ole aivan paras käytäntö. Idea älykkäistä / tyhmäistä komponenteista Angularissa on jotain, josta on keskusteltava enemmän, etenkin aloittelijapiireissä.

Se, onko komponentti fiksu / tyhmä, määrittelee sen roolin sovelluksen suuressa järjestelmässä. Tyhmä komponentit ovat usein valtiottomia käyttäytymisessä, joka on helppo ennustaa ja ymmärtää. Tee komponentista tyhmä aina kun mahdollista.

Älykkäitä komponentteja on vaikeampi käsittää, koska tulot ja lähdöt ovat mukana. Tutustu älykkäiden / tyhmäkomponenttien arkkitehtuuriin hyödyntääksesi Anglin ominaisuuksia oikein. Se antaa sinulle malleja ja ajattelutapoja kuinka lähestyä koodiasi ja sen suhteita toisiinsa.

Mitä Googlelle:

  • Älykkäät / tyhmä kulmakomponentit
  • Valtiottomat tyhmä komponentit
  • Esittelykomponentit
  • Älykkäät komponentit kulmassa

7. Sovelluksen rakenne ja parhaat käytännöt

CLI voi viedä sinut niin pitkälle vain rakenteen ja parhaiden käytäntöjen suhteen. Kulmaisen sovelluksen (tai minkä tahansa muun sovelluksen) rakentaminen on kuin talon rakentaminen. On asetettuja prosesseja, joita yhteisö on vuosien varrella optimoinut ja jotka johtavat tehokkaimpaan ja tehokkaimpaan sovellukseen.

Kulma ei ole poikkeus.

Suurin osa valinnoista, jotka kohdistuvat kulmalle, yrittävät oppia sitä, johtuvat usein rakenteellisten tietojen puutteesta; syntaksi on helppo poimia ja se on varma ja selkeä. Sovellusrakenteellinen tieto vaatii kuitenkin ymmärrystä kontekstista, vaatimuksista ja kuinka se kaikki sopii yhteen käsitteellisellä ja käytännöllisellä tasolla. Erilaisten potentiaalisten sovellusrakenteiden ja niiden parhaiden käytäntöjen oppiminen antaa sinulle näkökulman sovelluksen rakentamiseen.

Mitä Googlelle:

  • Yhden repon kulmasovellukset
  • Kulmikirjastot, Kulmapaketit
  • Kulmapaketit
  • Kulmaiset mikrosovellukset
  • Monorepo

8. Mallin sitova syntaksi

Sidonta on Java-kehyksen jäänpoisto. Se on myös yksi syy olemassaoloon. Mallien sidonta siltaa tilan staattisen HTML: n ja JavaScriptin välillä. Kulman mallin sitova syntaksi toimii näiden kahden tekniikan välisenä helpottimena.

Kun olet oppinut, kuinka ja milloin niitä käytetään, kerran staattisesta sivusta tulee interaktiivista jotain paljon helpompaa ja vähemmän ärsyttävää. Tutki sidonnan eri skenaarioita, kuten omaisuuden sitominen, tapahtumat, interpolointi ja kaksisuuntainen sidonta.

Mitä Googlelle:

  • Kulmaominaisuuksien sitominen
  • Kulmainen tapahtumasidonta
  • Kulmainen kaksisuuntainen sidonta, kulmainen interpolointi
  • Kulmavakiot

9. Ominaisuusmoduulit ja reititys

Ominaisuusmoduulit ovat aliarvostettuja, kun kyse on kulmasta. Se on todella fantastinen tapa organisoida ja rengastaa aitaus yritystarpeita. Se rajoittaa vastuita ja auttaa estämään koodien pilaantumista pitkällä tähtäimellä.

Ominaisuusmoduuleja on viittä tyyppiä (toimialue, reititetty, reititys, palvelu ja widget), ja kukin käsittelee tietyn tyyppisiä toimintoja. Ominaisuusmoduulien käytön oppiminen reitityksen yhteydessä voi auttaa luomaan erillisiä toimintokokonaisuuksia ja erottamaan sovelluksista huolellisesti ja selvästi aiheet.

Mitä Googlelle:

  • Kulmaominaisuusmoduulit
  • Jaetut ominaisuusrakenteet kulmassa
  • Ominaisuusmoduulin tarjoajat
  • Laiska lataus reititys- ja ominaisuusmoduuleilla

10. Lomakkeet ja validointi (reaktiiviset lomakkeet ja validoijat)

Lomakkeet ovat väistämätön osa mitä tahansa käyttöliittymäkehitystä.

Ja lomakkeiden mukana tulee myös validointi.

Älykkäitä, datavetoisia muotoja voidaan rakentaa eri tavoin, kun kyse on kulmikasta. Suosituin muotojen iteraatio on reaktiiviset muodot. Siellä on kuitenkin muitakin vaihtoehtoja, nimittäin mallipohjaiset ja mukautetut validoijat.

Oppiminen siitä, kuinka validoijat toimivat yhdessä CSS: n kanssa, nopeuttavat työnkulkua ja muuttavat sovelluksesi virheenkäsittelyvalmiiksi tilaksi.

Mitä Googlelle:

  • Kulmamuodon validointi
  • Mallipohjainen validointi
  • Reaktiivinen lomakkeen validointi
  • Synkronointi- ja asynk-vahvistimet kulmassa
  • Sisäänrakennetut validoijat
  • Kulman mukautetut validoijat
  • Cross-kentän validointi

11. Sisällön projektio

Kulmassa on sisältöprojektio, jota kutsutaan siirtämään tietoja vanhemmilta lapsille tehokkaasti. Vaikka tämä saattaa kuulostaa monimutkaiselta, se on tosiasia, että näkemykset asetetaan näkymiin sisäkentän muodostamiseksi.

Ymmärrämme usein sisällön heijastuksen pinnan tasolla - kun pesämme lastenäkymiä vanhemmanäkymän sisällä. Jotta ymmärrystämme voitaisiin laajentaa, meidän on kuitenkin ymmärrettävä myös, miten tietoja siirretään eri näkymien välillä. Sisällön projisoinnin ymmärtäminen on tässä hyödyllinen.

Sisältöprojektioiden ymmärtäminen voi auttaa sinua määrittämään sovelluksesi tiedonkulun ja sen, missä sen siirrettävyys tapahtuu.

Mitä Googlelle:

  • Kulmaisen sisällön projektio
  • Kulmainen vanhempien ja lasten suhde
  • Kulmanäkymän tietosuhteet

12. onPush Change Detection

Oletusarvoisesti Kulma käyttää oletuksena tapahtuvaa muutosten havaitsemisstrategiaa. Tämä tarkoittaa, että komponentit tarkistetaan aina. Vaikka oletuksen käyttämisessä ei ole mitään vikaa, se voi olla tehoton tapa havaita muutos.

Pienissä sovelluksissa nopeus ja suorituskyky ovat kunnossa. Kun sovelluksesi saavuttaa tietyn koon, asioista voi kuitenkin tulla varsin hankalia ajaa, etenkin vanhemmissa selaimissa.

onPush-muutoksen tunnistusstrategia nopeuttaa sovellusta merkittävästi, koska se riippuu tiettyjen laukaisevien tapahtumien sijaan jatkuvasta tarkistuksesta, onko jotain tapahtunut.

Mitä Googlelle:

  • Kulmainen onPush-muutoksen tunnistus

13. Reittisuojat, esikuormat, laiska lastaus

Jos sinulla on jonkinlainen sisäänkirjautuminen, tarvitset reitin vartijoita. Ajatus siitä, että voit suojata tietyt näkymät luvattomilta näkymiltä, ​​on pakollinen vaatimus monissa sovelluksissa. Reitin vartijat toimivat rajapintana reitittimen ja pyydetyn reitin välillä. Päätöksentekijä päättää, sallitaanko tietylle reitille pääsy. Reittikarttajien maailmassa on paljon tutkittavaa - nimittäin reitityspäätöksiä, jotka perustuvat esimerkiksi tokenin vanhenemiseen, käyttäjäroolien todennuksiin ja reittivakuuksiin.

Esilataus ja laiska lataus voivat myös parantaa käyttäjän kokemusta nopeuttamalla sovelluksesi latausaikaa. On myös hyvä huomata, että esilataus ja laiska lataus ovat muutakin kuin vain päätöstä siitä, haluatko ladata tietyn kuvan sarjan vai ei. Se voi myös parantaa niputettuja arkkitehtuureja ja ladata sovelluksen erilaisia ​​osia, joita voi olla eri laajuuksilla ja verkkotunnuksilla.

Mitä Googlelle:

  • Kulmareitin vartijat,
  • Kulmatodennusmallit
  • Kulmaesilataus- ja laiskalatausmoduulit
  • Kulmavarmat reittikuviot

14. Mukautetut putket

Tietojen muotoilu ei ole koskaan ollut näin helppoa kulmaputkien kanssa. Vaikka suuri osa valmiiksi konfiguroiduista ja pakkauksessa olevista putkista kattaa monia asioita, kuten päivämäärät, valuutan, prosenttimäärät ja merkkien kotelon, se ei kata kaikkea mitä tarvitset.

Sieltä mukautetut putket ovat hyödyllisiä. Voit luoda omia suodattimia helposti ja muuttaa tietomuotoja haluamallasi tavalla. Se on todella helppo saada, joten mene katsomaan sitä.

Mitä Googlelle:

  • Kulman mukautetut putket

15. @viewChild ja @ContentChild Decorators

viewChild ja contentChild ovat tapoja, joilla komponentti voi puhua keskenään. Kulma on se, että sinulla on useita komponentteja, jotka on koottu yhteen kuin palapeli, mutta se ei todellakaan voi tehdä paljon, jos palat on eristetty toisistaan.

Sieltä viewChild ja contentChild tulevat sisään. Näiden kahden sisustajan käytön oppiminen antaa sinulle mahdollisuuden käyttää niihin liittyviä komponentteja. Tämä helpottaa tietojen jakamista ja siihen liittyvien komponenttien laukaista tietojen ja tapahtumien siirtoa.

Mitä Googlelle:

  • Kulmakoriste
  • näkökulma- ja sisältölapset kulmassa
  • Kulmakomponenttien tietojen jakaminen

16. Dynaamiset komponentit ja ng-malli

Komponentit ovat kulmikkaan rakennuspalikoita. Kaikkia komponentteja ei kuitenkaan ole kiinteitä ja ne on luotava lennossa pikemminkin kuin esikompiloitu etukäteen.

Dynaamisten komponenttien avulla sovellus voi luoda tiettyjä komponentteja lennossa. Staattiset komponentit olettavat, että asiat eivät muutu. Se on ennustettavissa odotettavissa olevilla panoilla ja tuotoksilla.

Dynaamiset komponentit kuitenkin renderoidaan tarpeen mukaan. Niistä tulee varsin käteviä rakennettaessa sovellusta, joka voi kuunnella ulkoisia lähteitä ja niiden päivityksiä tai jotka ovat reaktio sivulla tapahtuneille toimille.

Mitä Googlelle:

  • Dynaamiset komponentit kulmassa
  • Dynaamiset komponentit ja ng-mallinnus

17. @Host @Hostbinding ja exportAs

@Host, @Hostbinding ja exportAs ovat kulmirekistejä, jotka laajentavat siihen liitettyjä parametreja. Se antaa sinulle myös mahdollisuuden luoda tiiviit mallit viedäksesi kulutukseen sovelluksen sisällä.

Jos yllä oleva kuulostaa hämmentävältä, sinun on ensin tutkittava kulmaohjeita ja niiden tarkoitusta olemassa oleviin. @Host, @Hostbinding ja exportAs ovat direktiivien piirteitä, jotka auttavat tekemään siitä sellaisen, mikä se on.

Mitä Googlelle:

  • Kulmaohjeiden mallit,
  • @Host, @Hostbinding ja exportAs nurkassa

18. Valtion johto RxJ: n kanssa

Sovelluksesi tila määrittelee lopulta tiedot, jotka näytetään käyttäjällesi. Jos tilasi on spagetin sotku, on mahdollista, että koko tietorakenne muuttuu hiutaleiseksi ja murenee mahdollisia muutoksia vastaan.

Kun alkaa ymmärtää, kuinka tilat toimivat kulma-tilassa, ymmärrät kuinka ja miksi tietosi käyttäytyvät sellaisenaan.

Vaikka Angularilla on oma valtionhallintajärjestelmä, RxJs on upea menetelmä keskittää valtioita ja niihin liittyviä tietoja. Tiedot voivat eksyä vanhempien ja lasten suhteiden ketjussa. RxJs irrottaa tämän luomalla keskitetyn kaupan.

Mitä Googlelle:

  • Kulman RxJ
  • Flux / Redux-periaatteet
  • Kulmaiset valtionhallinnan periaatteet

19. Riippuvuusinjektio ja vyöhykkeet

Riippuvuusinjektio on yleensä massiivinen käsite, joten jos et ole liian perehtynyt ideaan, tämä on yksi niistä asioista, jotka sinun on todella etsittävä. On useita tapoja luoda riippuvuusinjektiot puhdasta kulmaan, enimmäkseen rakentajan avulla. Se on tapa tuoda vain tarvitsemasi asiat ja parantaa siten sovelluksen tehokkuutta sen sijaan, että lataat kaiken auringon alla.

Kuten riippuvuusinjektio, myös vyöhykkeet ovat idea, joka ei myöskään ole yksinoikeudella kulmille. Se on tapa sovellukselle havaita asynkroniset tehtävät alusta loppuun. Tämä on tärkeää, koska näillä asynk-tehtävillä on valta muuttaa sovelluksen sisäisiä tiloja ja siten näkymää. Vyöhykkeet helpottavat muutosten havaitsemista.

Mitä Googlelle:

  • Kulmavyöhykkeet
  • Riippuvuusinjektiot
  • Kulmikas DI

Loppusanat

Kulma on massiivinen aihe. Vaikka Kulmasovellusten rakentaminen voi auttaa oppimisprosessia, joskus et vain tiedä mitä et tiedä. On vaikeata tuntea tuntematonta aloittaessasi, ja toivottavasti tämä lyhyt opas on antanut sinulle jonkin verran valaistusta tavanomaisten kulmaohjeiden lisäksi, sekä laajemman ja kattavamman kuvan kulmasta yleensä.

Olkaamme yhteydessä ja liitymme mahtavaan verkkosivustojen uutiskirje-luettelooni.Kiitos lukemisesta.❤

Aphinya