Mis on AngularJS? - Tutvuge nurkadeJS versioonidega direktiividega

Ülevaade AngularJS-ist

Ettevõttes Brat Tech LLC töötasid 2009. aastal arendajad Misko Hevery ja Adam Abrons välja AngularJS raamistiku, mille järel toimus revolutsioon esiotsa arendamisel ja üheleheliste rakenduste loomisel. AngularJS on javascripti raamistik, mis seob HTML-elemendid javascripti objektidega. Andmete sidumine ja sõltuvuse süstimine on AngularJ-de peamised omadused, mis säästavad aega pikkade koodide kirjutamisel, muutes arendajate ja brauserite töö lihtsamaks. Kuidas seda saavutatakse, selgitatakse põhjalikumalt, kuid praegu mäletate lihtsalt neid terminoloogiaid. Selles teemas õpime tundma AngularJS versiooni.

AngularJS versioonid

AngularJS on nurga 1.x versioonid ja pärast seda töötatakse välja nurk 2, mis erineb nurgast 1.x. töötab.

Miks AngularJS versioon ja kuidas see töötab?

AngularJS aitab meil arendada interaktiivseid ühelehelisi rakendusi. Üheleheliste rakenduste all pean silmas seda, et teie külastatud üksik leht laadib javascripti abil kogu muu sisu. See funktsioon aitab rakendusel olla kiire ja tõhus.

Kui kasutame rakenduste loomiseks javascripti ja html-i, peate vaate siduma mudeliga, kasutades JS-i funktsioone ja objekte. Kuid kui arvate, et need kahesuunalised andmed siduvad praktilises tööstuslikus rakenduses, muutub sama lähenemine pikkade koodidega tüütuks. See on üks peamisi põhjuseid, miks tekkis vajadus AngularJS-i õppida ja arendada.

Aeg õppida mõnda põhikontseptsiooni, enne kui hakata arendama rakendusi, millele AngularJS tugineb:

Mudel: mudel sisaldab andmeid, objekte ja loogikat.
Vaade: see on rakenduse visuaalne esitlus, mida nimetatakse ka kasutajaliideseks.
Vaade mudelile kahesuunaline köitmine: javascripti objekt, st objekt, mille soovite siduda HTML-i domeenide domeeniga, näiteks tekstikasti, sisestuse või mis tahes HTML-siltide jaoks ja vastupidi, saab hõlpsalt teha, kasutades mõnda eelnevalt määratletud AngularJS-i teeki.
Kontrollerid: kontrollerid on javascripti funktsioonid, mis ühendavad mudeli ja vaate.
Teenused: AngularJS-teenused on javascripti funktsioonid, mis täidavad konkreetset ülesannet või funktsionaalsust, mida javascript hooldab ja testib. Mõned teenuste näited on $ ulatus, $ http, $ rootScope.
Laused: Lauseid kasutatakse andmete sidumiseks HTML-iga. Seda funktsiooni nimetatakse ka interpolatsiooniks. Laused kirjutatakse ((expression)) lokkis traksidega. Väljendeid hinnatakse ja neid saab kirjutada ilma HTML-siltideta.
Moodulid: Moodulid toimivad konteinerina, mis sisaldab nurgarakenduse erinevaid osi, nagu näiteks kontroller, teenused, direktiivid jne.

Direktiivid ja reguleerimisala

Keskendume mõnele eelnevalt määratletud direktiivile ja sellele, kuidas need tegelikult töötavad. Suurem osa sellest direktiivist algab nurga alt võetud ng-ga

1. Reguleerimisala

Ulatus määratleb javascripti objekti, mille abil andmetele pääseb mudelist HTML-i. Ulatus toimib ühenduslülina nende kahe vahel.
Mõned ulatuslikud teenused on $ ulatus, $ rootScope. '$' määratleb, et need teenused on eelnevalt määratletud ja neid ei saa muuta. Pidage meeles, et HTML on tõstutundlik, kuid AngularJS on tõstutundlik, nii et $ Scope viskab vea määratlemata kujul.
Need tuleb deklareerida meie kontrolleri funktsioonis ja nurk süstib selle automaatselt.

2. ng-kontroller

Seda käsku kasutatakse kontrolleri eksemplari / objekti loomiseks, mille kaudu HTML DOM suhtleb tegeliku loogikaga.
HTML ütleb, et HTML-DOM-i loomisel ignoreeritakse mis tahes silte tähega "-".
Kui DOM on loodud, leiab nurgatõlk ng-kontrolleri direktiivi ja loob konkreetse kontrolleri eksemplari, pakkudes ka $ ulatuse teenust.
Ühel HTML-lehel võib olla palju ng-kontrollereid.

3. n-rakendus

See direktiiv toimib konteinerina, mis sisaldab kontrollereid, direktiive, filtreid, avaldisi jne. See registreerib või käivitab rakenduse või mooduli.
Teie HTML-is on ainult üks ng-rakendus. Ühe ng-rakenduse all võib olla palju ng-kontrollereid.

See kiirendab rakenduse objekti, mille teenus on $ rootScope.

Seega on $ rootScope muutujad / funktsioonid juurdepääsetavad kogu rakenduses.

4. ng-mudel

ng-mudelit kasutatakse andmete sidumiseks html-st mudeliobjektini. See pakub kahesuunalist köitmist.

5. ng-kui

Tingimuslike avalduste täitmiseks HTML-siltidel kasutatakse ng-if. Kui tingimus läheb valesti, siis DOM ei sisalda seda jaotust DOM-is.

6. ng-siduda

Interpolatsiooni (()) asemel võib kasutada ka ng-bind-i.

7. ng-puudega

Tingimuse alusel saab vaate elemendi keelata.

8. ng-show

Kui ng-show jaoks antud tingimus on tõene, kuvatakse konkreetne element DOM-is.

9. ng-varjata

Kui antud ng-hide'i tingimus on tõene, jääb konkreetne element DOM-is peidetuks.

10. ng-korda

See kordab HTML-i teatud jaotust või vahemikku koos massiivi või loendi pikkusega.

11. ng-klõps

Html-elemendil klõpsamise sündmusel täidab see pakutavat funktsiooni või ülesannet.

Näpunäide . Parim viis mis tahes keele õppimiseks on selle kodeerimine. Vaatame siis oma esimest koodi.

Näited AngularJS versioonist

Siin on mõned allpool toodud näited

First Name: Last Name: Your name is: (( fname +" "+ lname))




First Name:
Last Name:
Your name is: (( fname +" "+ lname))

First Name: Last Name: Your name is: (( fname +" "+ lname))




First Name:
Last Name:
Your name is: (( fname +" "+ lname))

First Name: Last Name: Your name is: (( fname +" "+ lname))




First Name:
Last Name:
Your name is: (( fname +" "+ lname))

Väljund:

Eesnimi: Joseph
Perekonnanimi: Alex
Teie nimi on: Joseph Alex

Kodeerimislõigu ülaosas on mõned punktid, millele keskenduda:

Rida 3 lisatakse lehele fail angular.min.js, mis laadib kõik AngularJS rakenduse käitamiseks vajalikud teegid.
AngularJS-l on põhiliselt 2 teeki angular.js ja selle faili tihendatud versioon kujul angular.min.js.
5. real näete direktiivi kui rakendust ng, mida HTML eirab Html DOM-i loomisel ja võtab AngularJS kasutusele ühe oma direktiivina rakenduse käivitamiseks.
Real 6, 7 kasutatakse ng-mudelit, mis seob tekstikasti sisestatava teksti muutujatega fname ja lname. Pidage meeles, et need muutujad on tõstutundlikud.
8. real näete avaldist ((fname + "" + lname)) ", mille nurk hindab ja kuvab tekstikastidesse sisestatud andmed. Seda nimetatakse interpolatsiooniks.

Vaatame veel ühe näite abil:

var app = angular.module('CustomerApp', ()); controller('firstController', function($scope)( $scope.customerName = 'Joe'; $scope.customerAge = '26'; ));

Eesnimi:

Perekonnanimi:

Kliendi nimi on ((customerName)) ja vanus on ((customerAge))

Selles näites luuakse real 5 rakendus nimega ClientApp, mis sisaldab kõiki rakenduse osi. Järgmisel real luuakse kontroller ja talle antakse nimi firstController. $ ulatus kuulutatakse funktsiooni parameetriks. AngularJS süstib selle otse otseseks kasutamiseks mõeldud rakendusse, arendaja ei pea seda selgesõnaliselt looma.

Seda funktsiooni nimetatakse sõltuvuse süstimiseks. Sarnasel viisil kasutatakse ng-kontrolleri sama kontrolleri jaoks ng-appi sildi all. Pidage meeles, et rakenduse või kontrolleri ulatus on seal, kus jagamine lõpeb või mis iganes te rakenduse või kontrolleri määratlete. Sel juhul ei pääse pärast 16. rida pärast kontrollerit ega rakendust juurde.

Soovitatavad artiklid

See on juhend küsimusele Mis on AngularJS versioon. Siin käsitleme AngularJS-i versioone koos direktiivide, ulatuse ja kuidas AngularJS töötab. Võite lisateabe saamiseks vaadata ka järgmisi artikleid -