Mis on kontroller nurkades?
AngularJs-is olevad kontrollerid võtavad andmed vaates, töötlevad neid ja saadavad need seejärel lõppkasutajale kuvatavasse vaatesse. Kontrolleril on teie põhiline äriloogika.
Kontroller kasutab andmemudelit, viib läbi vajaliku töötluse ja edastab seejärel väljundi vaatele, mis omakorda kuvatakse lõppkasutajale.
Selles õpetuses saate teada
- Mida kontroller teeb nurkade vaatenurgast
- Kuidas ehitada põhikontroller
- Kuidas määratleda meetodeid kontrolleris
- Ng-controller kasutamine välistes failides
- Kontrolleri peamine ülesanne on juhtida andmeid, mis edastatakse vaatele. Ulatus ja vaade on kahepoolsed.
- Vaate atribuudid võivad kutsuda ulatusele funktsioone. Pealegi võivad vaates toimuvad sündmused nimetada ulatusele meetodeid. Allpool olev koodilõik annab funktsiooni lihtsa näite.
- Funktsioon ($ scope), mis on määratletud kontrolleri määratlemisel, ja sisemine funktsioon, mida kasutatakse $ scope.firstName ja $ scope.lastName liitmise tagastamiseks.
- Kui defineerite funktsiooni muutujana, nimetatakse seda AngularJS-is meetodiks.
- Sel viisil lähevad andmed kontrollerilt ulatusse ja seejärel andmed edasi ulatuvad ulatusest vaatesse.
- Reguleerimisala kasutatakse mudeli kuvamiseks. Mudelit saab muuta reguleerimisalas määratletud meetodite abil, mida saab käivitada vaate sündmuste kaudu. Saame määratleda kahesuunalise mudeli sidumise ulatuse ja mudeli vahel.
- Ideaalis ei tohiks kontrollereid kasutada DOM-iga manipuleerimiseks. Seda peaksid tegema direktiivid, mida näeme hiljem.
- Parim tava on kontrolleri olemasolu funktsionaalsusel. Näiteks kui teil on sisestamiseks vorm ja vajate selleks kontrollerit, looge kontroller nimega "vormikontroller".
- Lisame viited bootstrap CSS-i stiililehtedele, mida kasutatakse koos bootstrap-teekidega.
- Lisame viited angularjs teekidele. Nii et nüüd, mida iganes me angular.js-iga edasi teeme, viidatakse sellest teegist.
- Lisame viited bootstrapi teegile, et muuta meie veebileht teatud juhtelementide jaoks paremini reageerivaks.
- Oleme lisanud viited jquery-teekidele, mida kasutatakse DOM-i manipuleerimiseks. Seda nõuab Angular, kuna osa Angulari funktsionaalsustest sõltub sellest teegist.
- Kõigepealt eraldame oma failid kaheks kaustaks, nagu seda tehakse mis tahes tavapärase veebirakendusega. Meil on kaust "CSS". See sisaldab kõiki meie kaskaadseid stiililehe faile ja siis on meil kaust "lib", millel on kõik meie JavaScripti failid.
- Fail bootstrap.css paigutatakse CSS-i kausta ja seda kasutati meie veebisaidi hea väljanägemise lisamiseks.
- Angular.js on meie peamine fail, mis laaditi alla angularJS saidilt ja hoiti meie lib-kaustas.
- Fail app.js sisaldab kontrolleritele meie koodi.
- Faili bootstrap.js kasutatakse faili bootstrap.cs täiendamiseks, et lisada meie veebirakendusse alglaadimisfunktsioon.
- Jquery-faili kasutatakse meie saidile DOM-i manipuleerimise funktsionaalsuse lisamiseks.
Mida kontroller nurkade vaatenurgast teeb
Järgnevalt on lihtne nurga JS kontrolleri töö määratlus.
Kuidas ehitada põhikontroller
Enne kontrolleri loomisega alustamist peame kõigepealt oma HTML-i lehe põhiseadistuse paika seadma.
Allpool olev koodilõik on lihtne HTML-leht, millel on pealkiri "Sündmuste registreerimine" ja millel on viited olulistele teekidele nagu Bootstrap, jquery ja Angular.
Vaikimisi on ülaltoodud koodilõik olemas kõigis meie näidetes, et saaksime järgmistes jaotistes näidata ainult konkreetset nurk-JS-koodi.
Teiseks vaatame oma faile ja failistruktuuri, millega me oma kursuse ajaks alustame.
Vaadake näidet angular.js kasutamise kohta,
Mida me siin teha tahame, on lihtsalt sõnade "AngularJS" kuvamine nii tekstivormingus kui ka tekstikastis, kui lehte brauseris vaadatakse.
Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Koodi selgitus:
- Ng-app märksõna kasutatakse, et tähistada, et see rakendus tuleks pidada nurga taotluse. Kõike, mis algab eesliitega 'ng', nimetatakse direktiiviks. "DemoApp" on meie rakendusele Angular.JS antud nimi.
- Oleme loonud div-märgendi ja sellesse märgendisse oleme lisanud ng-controller käskkirja koos meie kontrolleri nimega "DemoController". See muudab meie div-märgendi põhimõtteliselt võimeks tutvuda demokontrolleri sisuga. Direktiivi alusel peate mainima kontrolleri nime, et tagada juurdepääs kontrolleris määratletud funktsioonidele.
- Loome mudeli sidumise ng-mudeli direktiivi abil. Mida see teeb, on see, et see seob õpetuse nime tekstikasti liikumismuutujaga "tutorialName".
- Loome liikmemuutuja nimega "tutorialName", mida kasutatakse teabe kuvamiseks, mille kasutaja sisestab õpetuse nime tekstikasti.
- Loome mooduli, mis lisatakse meie rakendusele DemoApp. Nii et sellest moodulist saab nüüd osa meie rakendusest.
- Moodulis määratleme funktsiooni, mis määrab muutujale "tutorialName" vaikeväärtuse "AngularJS".
Kui käsk käivitatakse edukalt, kuvatakse brauseris koodi käivitamisel järgmine väljund.
Väljund:
Kuna määrasime muutujale tutorialName väärtuse "Nurga JS", kuvatakse see tekstiväljal ja tavalisel tekstireal.
Kuidas määratleda meetodeid kontrolleris
Tavaliselt tahaks äriloogika eraldamiseks määratleda kontrolleris mitu meetodit.
Oletame näiteks, et kui soovite, et teie kontroller teeks 2 põhitegevust,
- Tehke 2 numbrit
- Tehke 2 numbri lahutamine
Ideaalis loote siis oma kontrolleri sisse 2 meetodit, ühe liitmise teostamiseks ja teise lahutamiseks.
Vaatame lihtsat näidet selle kohta, kuidas saate Angular.JS-kontrolleris kohandatud meetodeid määratleda. Kontroller tagastab lihtsalt stringi.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Koodi selgitus:
- Siin määratleme lihtsalt funktsiooni, mis tagastab stringi "AngularJS". Funktsioon on suleobjekti külge kinnitatud liikumismuutuja kaudu nimega tutorialName.
- Kui käsk käivitatakse edukalt, kuvatakse brauseris koodi käivitamisel järgmine väljund.
Väljund:
Ng-controller kasutamine välistes failides
Vaatame "HelloWorldi" näidet, kus kogu funktsionaalsus paigutati ühte faili. Nüüd on aeg panna kontrolleri kood eraldi failidesse.
Selleks järgime alltoodud samme.
1. samm . Lisage faili app.js järgmine kontrolleri kood
angular.module('app',[]).controller('HelloWorldCtrl',function($scope){$scope.message = "Hello World"});
Ülaltoodud kood teeb järgmisi asju,
- Määratlege moodul nimega "rakendus", mis hoiab kontrollerit koos kontrolleri funktsioonidega.
- Looge kontroller nimega "HelloWorldCtrl". Seda kontrollerit kasutatakse funktsiooni abil "Tere maailm" sõnumi kuvamiseks.
- Reguleerimisala objekti kasutatakse teabe edastamiseks kontrollerist vaatele. Nii et meie puhul kasutatakse objekti objekti muutuja nimega "sõnum".
- Me määratleme muutuja sõnumi ja määrame sellele väärtuse "Tere maailm".
Samm 2) Nüüd lisage faili Sample.html div klass, mis sisaldab käsku ng-controller, ja lisage seejärel viide liikme muutujale "sõnum"
Ärge unustage lisada ka viide skriptifailile app.js, millel on teie kontrolleri lähtekood.
Event Registration Guru99 Global Event
{{message}}
Kui ülaltoodud kood on õigesti sisestatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.
Väljund:
Kokkuvõte
- Kontrolleri peamine ülesanne on luua ulatusobjekt, mis omakorda edastatakse vaatele
- Kuidas luua lihtsat kontrollerit ng-appi, ng-kontrolleri ja ng-mudeli abil
- Kuidas lisada kontrollerile kohandatud meetodeid, mida saab kasutada angularjs mooduli erinevate funktsioonide eraldamiseks.
- Kontrollerid saab määratleda välistes failides, et eraldada see kiht vaate kihist. Tavaliselt on see veebirakenduste loomisel parim tava.