Paveikslėlis - Aphinya Dechalert. Pavadinimas: Raudonasis monstras mokosi kampu

19 dalykų, kuriuos reikia išmokti, norint tapti efektyviu kampiniu programuotoju

Išsamus vadovas, kaip tapti „Angular“ profesionalu

„Todo“ programa yra „Hello world“ programos, kuria siekiama kurti priekinę programą, atitikmuo. Nors jis apima CRUD programos kūrimo aspektą, jis dažnai tik nubraižo, ką gali padaryti sistema ar biblioteka.

Atrodo, kad kampas visada keičiasi ir atnaujėja, tačiau iš tikrųjų yra tam tikrų dalykų, kurie išlieka tie patys. Čia yra panaikintos pagrindinės sąvokos, kurių reikia išmokti kalbant apie kampą, kad tinkamai panaudotumėte „JavaScript“ sistemą.

Kalbant apie kampą, yra daug ko išmokti, ir daugelis iš mūsų užstringa pradedančiųjų rate vien todėl, kad nežinome, kur eiti ar ko ieškoti. Tai yra išsamus vadovas (ir greita paties „Angular“ santrauka), kurio norėjau, kad turėčiau, kai pirmą kartą pradėjau nuo „Angular 2+“.

1. Modulinė kampinė architektūra

Teoriškai jūs galite sudėti visą savo kampinį kodą viename puslapyje ir į vieną didelę funkciją, tačiau tai nerekomenduojama ir nėra efektyvus būdas struktūrizuoti jūsų kodą ir nugalėti kampo egzistavimo tikslą.

„Anglic“ kaip struktūros dalį dažniausiai naudoja modulių sąvoką. Tai yra nuoroda į kodų rinkinį, kuriam egzistuoja viena priežastis. Jūsų „Kampinė“ programa iš esmės sudaryta iš modulių - vieni savarankiški, o kiti bendri.

Yra keli būdai, kaip modulius susisteminti savo programoje, ir įsigilinimas į skirtingas architektūrines struktūras taip pat gali padėti nustatyti, kaip pritaikysite savo mastelį programai augant. Tai taip pat gali padėti atskirti kodą ir užkirsti kelią kodų susiejimui.

Ką „Google“:

  • Kampinės architektūros modeliai
  • Keičiama kampinė taikymo architektūra

Aš imsiuosi šios temos:

  • Ką net reiškia modulinė architektūra kampinėje?

2. Vienpusis duomenų srautas ir nekeičiamumas

Grįždamas į kampą 1, dvipusis įrišimas užbūrė daugelio priekinių kūrėjų širdis. Iš esmės tai buvo vienas iš originalių „Angular“ pardavimo taškų. Tačiau laikui bėgant ji pradėjo kelti problemų dėl veiklos rezultatų, kai programa tapo sudėtingesnė.

Pasirodo, jums nereikia visur įrišti dvipusio ryšio.

„Angular 2+“ vis dar įmanoma įterpti į dvipusį ryšį, tačiau tik tada, kai to aiškiai reikalauja kūrėjas - tokiu būdu priversdamas kodą turintį asmenį galvoti apie savo duomenų kryptį ir srautą. Tai taip pat leidžia programai lanksčiau naudotis duomenimis, nustatant, kaip turėtų tekėti duomenys.

Ką „Google“:

  • Geriausia kampinio duomenų srauto praktika,
  • Vienos krypties srautas kampu,
  • Vienpusio įrišimo privalumai

Aš imsiuosi šios temos:

  • Pasakos apie vienkryptį duomenų srautą kampu

3. Atributas ir struktūrinės direktyvos

Direktyva yra HTML pratęsimas naudojant pasirinktinius elementus. Atributų nurodymai leidžia pakeisti elemento savybes. Struktūrinės direktyvos keičia išdėstymą pridedant arba pašalinant elementus iš DOM.

Pavyzdžiui, „ngSwitch“ ir „ngIf“ yra struktūrinės direktyvos, nes jos įvertina parametrus ir nustato, ar DOM dalys turėtų egzistuoti, ar ne.

Atributų nurodymai yra įprasta elgsena, pridedama prie elemento, komponento ar kitų direktyvų.

Išmokę naudotis šiomis dviem direktyvomis, galite išplėsti programos galimybes ir sumažinti projekto kopijų kiekį. Atributų nurodymai taip pat gali padėti centralizuoti tam tikrą elgesį, naudojamą skirtingose ​​programos dalyse.

Ką „Google“:

  • Kampinių požymių direktyvos,
  • Kampinės konstrukcijų direktyvos
  • Kampiniai struktūrinės direktyvos modeliai

4. Komponentų gyvenimo ciklo kabliukai

Kiekvienas programinės įrangos elementas turi savo gyvavimo ciklą, kuris nustato, kaip kažkas sukuriamas, pateikiamas ir pašalinamas. Kampas turi komponentų gyvavimo ciklą, kuris eina maždaug taip:

Kurti → Pateikti → Pateikti vaikams → Patikrinkite, ar pasikeičia duomenų susietos savybės → sunaikinti → pašalinti iš DOM

Mes turime galimybę įsitraukti į svarbiausius šio ciklo momentus ir nukreipti jį į tam tikras laiko ar įvykio akimirkas. Tai leidžia mums sukurti tinkamus atsakymus ir konfigūruoti elgseną atsižvelgiant į skirtingas komponento egzistavimo fazes.

Pvz., Gali tekti įkelti tam tikrus duomenis prieš pateikiant puslapį. Tai galite padaryti naudodami „ngOnInit“ (). O galbūt reikia atsijungti nuo duomenų bazės. Tai galima padaryti naudojant „ngOnDestroy“ ().

Ką „Google“:

  • Kampiniai gyvenimo ciklo kabliukai
  • Komponentų gyvenimo ciklas

5. Http ir stebimos paslaugos

Tai tikrai nėra specifinė kampinė savybė, o kažkas iš ES7. Ką tik jis buvo įdiegtas kaip sistemos palaikymo galimybių dalis ir supranta, kad tai taip pat reiškia „React“, „Vue“ ir bet kurią „JavaScript“ susijusią biblioteką ar sistemą.

Stebimos paslaugos yra modeliai, kurie leidžia efektyviai tvarkyti duomenis - tai leidžia išanalizuoti, modifikuoti ir prižiūrėti duomenis įvykiais pagrįstoje sistemoje. Negalite iš tikrųjų pabėgti iš „Http“ ir „Observables“, nes viskas yra duomenys.

Ką „Google“:

  • Stebimi „JavaScript“ modeliai
  • Kampinis HTTP ir stebimi elementai
  • ES7 stebimas bruožas

6. Išmanioji / nemandagiųjų komponentų architektūra

Rašydami savo kampines programas, mes linkę viską sudėti į komponentą. Tačiau tai nėra visiškai geriausia praktika. Išmaniųjų / nemandagiųjų komponentų idėja „Angular“ yra kažkas, apie ką reikia kalbėti daugiau, ypač pradedančiųjų sluoksniuose.

Ar komponentas yra protingas / nemandagus, lemia jo vaidmuo pagrindinėje programos schemoje. Nemalonūs komponentai dažnai būna be pilietybės elgesio, kurį lengva nuspėti ir suprasti. Kai įmanoma, padarykite savo komponentą kvailiu.

Išmaniuosius komponentus yra sunkiau suvokti, nes naudojami įėjimai ir išėjimai. Jei norite tinkamai panaudoti „Angular“ galimybes, pažiūrėkite į intelektualiųjų / kvailųjų komponentų architektūrą. Tai suteiks jums pavyzdžių ir mąstymo būdų, kaip priartėti prie savo kodo ir jo santykių tarpusavyje.

Ką „Google“:

  • Sumanūs / kvaili kampiniai komponentai
  • Tikrieji komponentai be pilietybės
  • Pateikimo komponentai
  • Išmanieji komponentai kampu

7. Paraiškos struktūra ir geriausia praktika

CLI gali nuvesti jus iki šiol tik tada, kai reikia struktūros ir geriausios praktikos. Kampinės programos (arba bet kurios kitos programos) kūrimas yra tarsi namo statyba. Yra nustatyti procesai, kuriuos per metus optimizavo bendruomenė ir kurie užtikrins efektyviausią ir efektyviausią taikymą.

Kampas nėra išimtis.

Bandantieji išmokti daugiausiai skundų dėl kampinio dažnai kyla dėl struktūrinių žinių stokos; sintaksę lengva pasiimti ir ji yra aiški ir aiški. Taikant struktūrines žinias, reikia suprasti kontekstą, reikalavimus ir kaip visa tai dera konceptualiu ir praktiniu lygmenimis. Mokydamiesi skirtingų kampinių taikymo struktūrų ir jų geriausios praktikos, gausite perspektyvą, kaip sukurti savo programą.

Ką „Google“:

  • Vieno atpirkimo kampinės programos
  • Kampinės bibliotekos, Kampinės pakuotės
  • Kampiniai ryšuliai
  • Kampinės mikroprogramos
  • Monorepo

8. Šablono įrišimo sintaksė

Įrišimas yra „JavaScript“ sistemos apledėjimas. Tai taip pat yra viena iš egzistavimo priežasčių. Šablonų rišimas sujungia tarpą tarp statinio HTML ir „JavaScript“. Kampo šablono įrišimo sintaksė yra šių dviejų technologijų tarpininkė.

Sužinoję, kaip ir kada juos naudoti, vieną kartą statinį puslapį paversti interaktyviu tampa daug lengviau ir mažiau erzina. Pažvelkite į įvairius įrišimo scenarijus, tokius kaip nuosavybės įpareigojimas, įvykiai, interpoliacija ir dvipusis įrišimas.

Ką „Google“:

  • Kampinis nuosavybės rišimas
  • Kampinis įvykių rišimas
  • Kampinis dvipusis rišimas, kampinė interpoliacija
  • Kampinės praeinančios konstantos

9. Funkcijų moduliai ir maršruto parinkimas

Funkcijų moduliai yra nepakankamai įvertinti, kai kalbama apie kampą. Tai iš tikrųjų yra fantastiškas būdas organizuoti ir surinkti tvorų rinkinius verslo reikalams. Tai riboja atsakomybę ir ilgainiui padeda užkirsti kelią kodų taršai.

Yra penkių tipų funkcijų moduliai (domenas, maršrutizuotas, maršruto parinkimas, paslauga ir valdiklis) ir kiekvienas jų susijęs su tam tikro tipo funkcijomis. Išmokimas naudoti funkcijų modulius kartu su maršruto parinkimu gali padėti sukurti atskirus funkcijų rinkinius ir tinkamai bei aiškiai atskirti jūsų programos problemas.

Ką „Google“:

  • Kampinių elementų moduliai
  • Bendros elementų struktūros kampu
  • Funkcijų modulių teikėjai
  • Juokas pakrovimas naudojant maršruto ir funkcijų modulius

10. Formos ir patvirtinimas (reaktyviosios formos ir patvirtintojai)

Formos yra neatsiejama bet kurios priekinės programos dalies dalis.

Ir kartu su formomis ateina patvirtinimas.

Yra įvairių būdų, kaip sukurti intelektualias, duomenų pagrįstas formas, kai kalbama apie kampinę. Populiariausias formų kartojimas yra reaktyviosios formos. Tačiau yra ir kitų variantų, būtent šablonų pagrįsti ir pasirinktiniai patvirtintojai.

Sužinoję, kaip tikrintojai dirba kartu su CSS, padėsite pagreitinti jūsų darbo eigą ir paversti jūsų programą tinkama erdve, kuriai tinkama taisyti klaidas.

Ką „Google“:

  • Kampinės formos patvirtinimas
  • Šablono pagrįstas patvirtinimas
  • Reaktyvus formos patvirtinimas
  • Sinchronizavimo ir asinchroninio patvirtinimo įrankiai kampu
  • Integruoti vertintojai
  • Kampiniai pasirinktiniai vertintojai
  • Kryžminio lauko patvirtinimas

11. Turinio projekcija

Kampinis yra dalykas, vadinamas turinio projekcija, tai yra galimybė efektyviai perduoti duomenis iš tėvų į vaikus. Nors tai gali atrodyti sudėtinga, iš tikrųjų tai yra rodinių pateikimas rodiniuose, kad būtų suformuotas pagrindinis vaizdas.

Mes dažnai suprantame turinio projekciją paviršiaus lygiu - kai įterpiame vaiko vaizdus tėvų vaizde. Tačiau norėdami išplėsti savo supratimą, turime suprasti ir tai, kaip duomenys perduodami skirtingiems vaizdams. Čia naudinga suprasti turinio projekciją.

Supratimas apie turinio projekciją gali padėti nustatyti jūsų programos duomenų srautą ir vietą, kur jie keičiami.

Ką „Google“:

  • Kampinio turinio projekcija
  • Kampinis tėvų ir vaikų santykis
  • Kampinio vaizdo duomenų ryšiai

12. onPush Change Detection

Pagal numatytuosius nustatymus, kampinis naudoja numatytąją pakeitimų aptikimo strategiją. Tai reiškia, kad komponentai bus visada tikrinami. Naudojant numatytąją reikšmę nėra nieko blogo, tačiau tai gali būti neveiksmingas būdas nustatyti pokyčius.

Mažoms programoms greitis ir našumas yra tinkami. Tačiau kai jūsų programa tampa tam tikro dydžio, viskas gali būti gana sudėtinga vykdyti, ypač senesnėse naršyklėse.

„onPush“ pakeitimų aptikimo strategija žymiai paspartins taikymą, nes tai priklauso nuo konkrečių suveikimų, o ne nuo nuolatinio tikrinimo, ar kažkas nutiko.

Ką „Google“:

  • Kampinis „onPush“ pokyčių aptikimas

13. Maršruto sargai, išankstiniai pakrovimai, tingus krovimas

Jei turite tam tikrą prisijungimo vardą, jums reikės maršruto apsaugos. Idėja, kad galite apsaugoti tam tikrus vaizdus nuo neleistinų rodinių, yra būtinas reikalavimas daugelyje programų. Maršruto sargai veikia kaip sąsaja tarp jūsų maršrutizatoriaus ir reikalaujamo maršruto. Sprendimą priimantis asmuo nustato, ar tam tikram maršrutui leidžiama patekti, ar ne. Maršrutizatorių pasaulyje yra daug ką ištirti - būtent maršrutizacijos sprendimai, pagrįsti tokiais dalykais kaip žetono galiojimas, vartotojo vaidmenų autentifikavimas ir maršruto vertybiniai popieriai.

Išankstinis ir tingus krovimas taip pat gali pagerinti jūsų vartotojo patirtį, paspartindami jūsų programos įkėlimo laiką. Taip pat gerai pažymėti, kad išankstinis ir tingus įkėlimas yra ne tik sprendimas, ar įkelti tam tikrą vaizdų rinkinį, ar ne. Tai taip pat gali patobulinti jūsų susietą architektūrą ir įkelti skirtingas programos dalis, kurios gali būti skirtingose ​​taikymo srityse ir srityse.

Ką „Google“:

  • Kampiniai maršruto sargai,
  • Kampinės autentifikacijos modeliai
  • Kampiniai išankstinio ir tinginio krovimo moduliai
  • Saugūs maršrutiniai kampai

14. Individualūs vamzdžiai

Formatuoti duomenis dar nebuvo taip paprasta, naudojant kampinius vamzdžius. Nors daugelis iš anksto sukonfigūruotų ir „supakuotų“ vamzdžių apima daugybę dalykų, tokių kaip datos, valiuta, procentai ir simbolių didžioji dalis, jis neapima visko, ko jums kada nors prireiks.

Štai kur pravers tinkinti vamzdžiai. Galite lengvai susikurti savo filtrus ir paversti duomenų formatus savo skoniu. Tai tikrai lengva padaryti, todėl eik ir patikrink.

Ką „Google“:

  • Kampiniai pasirinktiniai vamzdžiai

15. „@viewChild“ ir „@ContentChild“ dekoratoriai

„viewChild“ ir „contentChild“ yra būdai, kuriais jūsų komponentas gali susikalbėti. Kampo esmė ta, kad jūs turite kelis komponentus, kurie yra sudėti kartu kaip dėlionė, tačiau šis galvosūkis tikrai negali padaryti daug, jei detalės yra atskirtos viena nuo kitos.

Štai kur yra „viewChild“ ir „contentChild“. Mokydamiesi naudoti šiuos du dekoratorius, galėsite pasiekti susijusius komponentus. Tai palengvina dalijimąsi duomenimis ir duomenų ir įvykių, kuriuos sukėlė susiję komponentai, perdavimą.

Ką „Google“:

  • Kampiniai dekoratoriai
  • vaikų ir turinio vaikų kampinis
  • Dalijimasis kampiniais komponentais

16. Dinaminiai komponentai ir ng-šablonas

Komponentai yra kampo statybiniai blokai. Tačiau ne visi komponentai yra pritvirtinti ir juos reikia sukurti iškart, o ne iš anksto kompiliuoti.

Dinaminiai komponentai suteikia galimybę programai sukurti tam tikrus komponentus. Statiniai komponentai daro prielaidą, kad viskas nepasikeis. Tai numatoma numatomomis sąnaudomis ir išvestimis.

Tačiau dinaminiai komponentai pateikiami pagal poreikį. Jie tampa gana patogu kuriant programą, kuri gali ieškoti išorinių šaltinių ir jų atnaujinimų, arba yra reakcija į puslapyje atliktus veiksmus.

Ką „Google“:

  • Dinaminiai komponentai kampu
  • Dinaminiai komponentai be šablono

17. @Host @Hostbinding and exportAs

@Host, @Hostbinding ir exportAs yra kampinių direktyvų dekoratoriai, išplečiantys parametrus, prie kurių jis pridedamas. Tai taip pat suteikia jums galimybę sukurti glaustus šablonus, kuriuos būtų galima eksportuoti vartojimui programoje.

Jei tai, kas išdėstyta pirmiau, atrodo painu, turėtumėte pradėti ieškoti kampinių direktyvų ir jų esamų tikslų. „@Host“, „@Hostbinding“ ir „exportAs“ yra direktyvų savybės, padedančios padaryti tai, kas tai yra.

Ką „Google“:

  • Kampinių direktyvų modeliai,
  • @Host, @Hostbinding ir exportAs kampu

18. Valstybės valdymas kartu su RxJ

Jūsų programos būsena galiausiai lemia duomenis, kurie rodomi jūsų vartotojui. Jei jūsų būklė yra spagečių sumaištis, tikėtina, kad visa jūsų duomenų struktūra taps nepalanki ir sutrupės nuo bet kokių pakeitimų.

Kai pradėsite suprasti, kaip būsenos veikia kampu, jūs suprasite, kaip ir kodėl jūsų duomenys elgiasi taip, kaip yra.

Nors „Angular“ turi savo valstybės valdymo sistemą, „RxJs“ yra puikus būdas centralizuoti valstybes ir su ja susijusius duomenis. Duomenys gali pasimesti tėvų ir vaikų santykių grandinėje. „RxJs“ atsieja tai sukurdama centralizuotą parduotuvę.

Ką „Google“:

  • Kampiniai RxJ
  • Flux / Redux principai
  • Kampiniai valstybės valdymo principai

19. Priklausomybės injekcija ir zonos

Priklausomybės injekcija yra didžiulė sąvoka, taigi, jei nelabai išmanote idėją, tai yra vienas iš dalykų, kurių jums reikia ieškoti. Yra keli būdai, kaip švariai sukurti priklausomybės injekcijas kampiniame taške, dažniausiai tai daroma per konstruktorių. Tai būdas importuoti tik jums reikalingus daiktus, todėl padidinsite programos efektyvumą, o ne kraunate viską po saule.

Kaip ir priklausomybės injekcija, zonos taip pat yra idėja, kuri taip pat nėra išskirtinė kampiniam. Tai yra būdas programai aptikti asinchronines užduotis nuo pradžios iki pabaigos. Tai svarbu, nes šios asinchroninės užduotys gali pakeisti programos vidines būsenas, taigi ir vaizdą. Zonos palengvina pokyčių aptikimo procesą.

Ką „Google“:

  • Kampinės zonos
  • Priklausomybės injekcijos
  • Kampinis DI

Baigiamieji žodžiai

Kampas yra didžiulė tema. Kurdami kampines programas gali padėti mokytis, kartais tiesiog nežinote to, ko nežinote. Sunku žinoti nežinomą, kai pradedate, ir tikiuosi, kad šis trumpas vadovas suteikė jums šiek tiek daugiau informacijos nei jūsų įprasti mokymai apie kampus, kartu su platesniu ir išsamesniu žvilgsniu į kampą apskritai.

Palaikykime ryšį ir prisijunkite prie mano nuostabių žiniatinklyje suvestinių naujienlaiškių sąrašo.Ačiū, kad perskaitėte.❤

Afinija