Mis vahe on komponendil AngularJS 1.5 ja 2 nurgalisel komponendil?


Vastus 1:

Nurga js 1 põhijooned on direktiivid. Direktiivid võimaldavad meil luua oma kohandatud elemente ja siduda need DOM-iga. samuti saame elementi manipuleerida, kasutades funktsiooni „link“. Direktiivi elutsükkel koosneb kompileerimisest, linkimisest ja kontrollerist. Probleem on selles, et iga lihtsa direktiivi korral käivitub täielik elutsükkel. Kui rakendus suureneb, võib see olla toimivusega seotud probleem. Kuna iga meie loodud direktiiv ei vaja lingifunktsiooni ega kontrollereid.

Nurk 2 järgib komponendipõhist struktuuri. Komponendid on direktiivi eriliigid. See on kergem kui tavalised nurkdirektiivid. Komponendid on korduvkasutatavad komponendid, kui direktiivid on korduvkasutatavad käitumisviisid. Kuna komponent on loodud rakenduse alglaadimise kaudu, on see palju kiirem. Komponentide elutsükkel on direktiividega võrreldes palju kergem.


Vastus 2:

Nende loomise viis. Funktsionaalselt teenivad nad sama eesmärki. Esiteks on kontroller seadistatud rakendust hoidma. Pange tähele, et kangelase vara on siia seatud.

angular.module ('heroApp', []). kontroller ('MainCtrl', funktsioon MainCtrl () {
  see.hero = {
    nimi: 'Spawn'
  };
});

Komponent:

angular.module ('heroApp') .komponent ('heroDetail', {
  templateUrl: 'heroDetail.html',
  köited: {
    kangelane: '='
  }
});

Siis sisaldab komponentfail ise:

 Nimi: {{$ ctrl.hero.name}} 

Seejärel kasutatakse seda HTML-i põhvaates.


   Kangelane
  

Nagu näete, on nurga 1 kontroller tõesti teatud tüüpi elementdirektiiv. Komponendid on suures osas lihtsustatud elemendidirektiivid, ilma kõigi funktsioonideta (kompileerimine ja linkimine puuduvad).

————————————————

Siin on esimene kangelaste ringreis saidilt Angular.io, mis kasutab uue nurga alt:

importige {komponent} kaustast @ nurk / südamik;

ekspordiklassi kangelane {
 isikukood;
 nimi: string;
}

@Komponent ({
 valija: 'minu rakendus',
 mall: `
 

{{title}}

 

{{kangelane.nimi}} üksikasjad!

 
id: {{hero.id}}
 
  nimi:    
 ` }) ekspordiklass AppComponent {  pealkiri = 'Kangelaste ringreis';  kangelane: kangelane = {  id: 1,  nimi: 'Windstorm'  }; }

Saame siin abiks ES6-st süntaksi suhkru, kuid enamik sellest on lihtsalt JavaScripti.

Erinevused. Komponente määratletakse erinevalt, kasutades metaandmete annotatsioone (alates ES6-st). Komponendi määratlemiseks kasutatakse valijat, mis pisut erineb nurga 1 versioonist. Stringide interpoleerimist toetatakse puhtamas süntaksis ({{title}}). Isegi ngModel töötab kahe versiooni vahel erinevalt.

Nurgas 1 oli vaikimisi kahesuunaline andmete sidumine, kasutades ngModelit, ja see pidi olema nüri - suur segadus, kuna see on vaikimisi, kuid enamikul juhtudel ei soovi te tegelikult kahesuunalist andmete sidumist, seega kippus see olema asjatut ülekasutamist ja põhjustas jõudlusprobleeme. Nurga uues versioonis on vaikimisi ühesuunaline andmete sidumine. Te teete vara köitmise või meetodiga köitmise. Kui teil on vaja millegi jaoks kahesuunalist andmete sidumist, võite kasutada funktsiooni [(ngModel)] või kasutada omaduste sidumist ja meetodi sidumist. Uues versioonis on [(ngModel)] süntaks ainult süntaktiline “suhkur” või lühend. Tegelikult juhtub see, et genereeritakse atribuutide sidumine ja genereeritakse meetodi sidumine. See parandab jõudlust ja muudab avatud API puhtamaks.

Muidugi saate teha kõike, mida nurk 1 komponent teeb, direktiiviga. Nurga 1 komponendid on mõeldud selleks, et eraldada direktiive, mis teevad asju (nii et neil on kompileerimine ja linkimine) nendest, mis on asju (komponendid lehel, mis ei vaja kompileerimist ja linkimist.) Komponentide olemasolu nurgas 1 on peamiseks põhjuseks hõlbustada suhtlemist nurga uue versiooniga, kui need töötavad samal lehel, või sammuna, kui soovite oma koodi täielikult uude versiooni üle viia.