Kas yra „AngularJs“ valdiklis?
„AngularJs“ valdikliai ima duomenis iš rodinio, apdoroja duomenis ir išsiunčia tuos duomenis į rodinį, kuris rodomas galutiniam vartotojui. Valdiklis turės jūsų pagrindinę verslo logiką.
Valdiklis naudos duomenų modelį, atliks reikiamą apdorojimą ir tada perduos išvestį rodiniui, kuris savo ruožtu rodomas galutiniam vartotojui.
Šioje pamokoje sužinosite
- Ką valdiklis veikia iš kampinės perspektyvos
- Kaip sukurti pagrindinį valdiklį
- Kaip apibrėžti metodus valdiklyje
- „Ng-controller“ naudojimas išoriniuose failuose
- Pagrindinė valdiklio atsakomybė yra valdyti duomenis, kurie perduodami rodiniui. Taikymo sritis ir vaizdas yra dvipusis ryšys.
- Rodinio ypatybės gali iškviesti srities „funkcijas“. Be to, įvykiai žiūrint gali pakviesti taikymo sritį „metodais“. Žemiau pateiktame kodo fragmente pateikiamas paprastas funkcijos pavyzdys.
- Funkcija ($ sritis), kuri yra apibrėžta apibrėžiant valdiklį, ir vidinė funkcija, kuri naudojama norint grąžinti $ srities.firstName ir $ sritis.lastName sujungimą.
- Kai „AngularJS“ apibrėžiate funkciją kaip kintamąjį, ji vadinama „Method“.
- Tokiu būdu duomenys iš valdiklio pereina į taikymo sritį, o tada duomenys pereina pirmyn ir atgal iš srities į rodinį.
- Taikymo sritis naudojama norint parodyti modelį. Modelis gali būti modifikuojamas taikant srityje apibrėžtus metodus, kuriuos galima suaktyvinti įvykiuose iš rodinio. Mes galime apibrėžti dviejų krypčių modelio susiejimą nuo taikymo srities iki modelio.
- Idealiu atveju valdikliai neturėtų būti naudojami manipuliuojant DOM. Tai turėtų būti padaryta direktyvomis, kurias pamatysime vėliau.
- Geriausia praktika yra turėti valdiklį, pagrįstą funkcionalumu. Pvz., Jei turite įvesties formą ir tam reikalingas valdiklis, sukurkite valdiklį, vadinamą „formos valdikliu“.
- Pridedame nuorodas į „bootstrap“ CSS stiliaus lapus, kurie bus naudojami kartu su įkrovos bibliotekų bibliotekomis.
- Pridedame nuorodas į angularjs bibliotekas. Taigi dabar, ką darysime su angular.js toliau, bus nurodyta šioje bibliotekoje.
- Pridedame nuorodas į „bootstrap“ biblioteką, kad mūsų tinklalapis būtų labiau reaguojantis į tam tikrus valdiklius.
- Pridėjome nuorodų į „Jquery“ bibliotekas, kurios bus naudojamos manipuliuojant DOM. To reikalauja „Angular“, nes kai kurie „Angular“ funkcionalumai priklauso nuo šios bibliotekos.
- Pirmiausia išskirstome failus į 2 aplankus, kaip tai daroma naudojant bet kurią įprastą žiniatinklio programą. Mes turime aplanką „CSS“. Jame bus visi pakopinių stiliaus lapų failai, tada turėsime aplanką „lib“, kuriame bus visi „JavaScript“ failai.
- Bootstrap.css failas dedamas į CSS aplanką ir jis naudojamas norint pridėti gerą mūsų svetainės išvaizdą.
- Angular.js yra pagrindinis failas, kuris buvo atsisiųstas iš angularJS svetainės ir laikomas mūsų lib aplanke.
- App.js faile bus mūsų kodas valdikliams.
- Bootstrap.js failas naudojamas papildyti failą bootstrap.cs, kad mūsų žiniatinklio programoje būtų pridėta įkrovos funkcijos.
- Jquery failas bus naudojamas DOM manipuliavimo funkcijai pridėti prie mūsų svetainės.
Ką valdiklis daro iš „Angular“ perspektyvos
Toliau pateikiamas paprastas kampinio JS valdiklio darbo apibrėžimas.
Kaip sukurti pagrindinį valdiklį
Prieš pradėdami kurti valdiklį, pirmiausia turime nustatyti pagrindinę HTML puslapio sąranką.
Žemiau pateiktas kodo fragmentas yra paprastas HTML puslapis, kurio pavadinimas yra „Įvykio registracija“ ir kuriame pateikiamos nuorodos į svarbias bibliotekas, tokias kaip „Bootstrap“, „jquery“ ir „Angular“.
Pagal numatytuosius nustatymus aukščiau pateiktas kodo fragmentas bus pateiktas visuose pavyzdžiuose, kad tolesniuose skyriuose galėtume parodyti tik konkretų kampinį JS kodą.
Antra, pažvelkime į mūsų failus ir failų struktūrą, nuo kurių pradėsime visą savo kursą.
Pažiūrėkime, kaip naudoti angular.js,
Čia mes norime tiesiog parodyti žodžius „AngularJS“ ir teksto formatu, ir teksto laukelyje, kai puslapis peržiūrimas naršyklėje.
Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Kodo paaiškinimas:
- Raktinis žodis „ ng-app“ naudojamas pažymėti, kad ši programa turėtų būti laikoma kampine programa. Viskas, kas prasideda priešdėliu „ng“ , vadinama direktyva. „DemoApp“ yra pavadinimas, suteiktas mūsų programai „Angular.JS“.
- Sukūrėme „div“ žymą ir šioje žymoje pridėjome „ng-controller“ direktyvą kartu su mūsų valdiklio pavadinimu „DemoController“. Tai iš esmės leidžia mūsų div žymeniui pasiekti prieigą prie demonstracinio valdiklio turinio. Pagal direktyvą turite paminėti valdiklio pavadinimą, kad galėtumėte pasiekti valdiklyje apibrėžtą funkciją.
- Kuriame įpareigojantį modelį naudodami „ng-model“ direktyvą. Tai daro tai, kad susieja „Tutorial Name“ teksto laukelį su nario kintamuoju „tutorialName“.
- Mes kuriame nario kintamąjį, vadinamą „tutorialName“, kuris bus naudojamas informacijai, kurią vartotojas įveda mokymo programos pavadinimo teksto laukelyje, rodyti.
- Mes kuriame modulį, kuris bus pridėtas prie mūsų „DemoApp“ programos. Taigi šis modulis dabar tampa mūsų programos dalimi.
- Modulyje apibrėžiame funkciją, kuri priskiria numatytąją „AngularJS“ vertę mūsų tutorialName kintamajam.
Jei komanda sėkmingai vykdoma, paleidus kodą naršyklėje bus rodoma ši išvestis.
Išvestis:
Kadangi kintamajam tutorialName priskyrėme reikšmę „Kampinis JS“, tai bus rodoma teksto laukelyje ir paprastoje teksto eilutėje.
Kaip apibrėžti metodus valdiklyje
Paprastai norima valdiklyje apibrėžti kelis metodus, kad būtų atskirta verslo logika.
Pvz., Tarkime, jei norite, kad jūsų valdiklis atliktų 2 pagrindinius veiksmus,
- Atlikite 2 skaičių pridėjimą
- Atlikite 2 skaičių atėmimą
Idealiu atveju jūs sukursite 2 metodus savo valdiklyje, vieną atlikti pridėjimą, o kitą - atimti.
Pažiūrėkime paprastą pavyzdį, kaip galite apibrėžti pasirinktinius metodus „Angular.JS“ valdiklyje. Valdiklis tiesiog grąžins eilutę.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Kodo paaiškinimas:
- Čia mes tiesiog apibrėžiame funkciją, kuri pateikia eilutę "AngularJS". Funkcija pridedama prie taikymo srities objekto per nario kintamąjį, vadinamą tutorialName.
- Jei komanda sėkmingai vykdoma, paleidus kodą naršyklėje bus rodoma ši išvestis.
Išvestis:
„Ng-controller“ naudojimas išoriniuose failuose
Pažvelkime į „HelloWorld“ pavyzdį, kai visos funkcijos buvo įdėtos į vieną failą. Dabar atėjo laikas įdėti valdiklio kodą į atskirus failus.
Atlikime toliau nurodytus veiksmus.
1 žingsnis) Į failą „app.js“ pridėkite šį valdiklio kodą
angular.module('app',[]).controller('HelloWorldCtrl',function($scope){$scope.message = "Hello World"});
Aukščiau pateiktas kodas atlieka šiuos veiksmus:
- Apibrėžkite modulį, vadinamą „programa“, kuris laikys valdiklį kartu su valdiklio funkcijomis.
- Sukurkite valdiklį pavadinimu „HelloWorldCtrl“. Šis valdiklis bus naudojamas norint parodyti „Hello World“ pranešimą.
- Apimties objektas naudojamas perduoti informaciją iš valdiklio į rodinį. Taigi, mūsų atveju objektas „taikymo sritis“ bus naudojamas kintamajam, vadinamam „pranešimas“, laikyti.
- Apibrėžiame kintamąjį pranešimą ir jam priskiriame vertę „Hello World“.
2 žingsnis. Dabar faile Sample.html pridėkite div klasę, kurioje bus ng-controller direktyva, tada pridėkite nuorodą į nario kintamąjį „pranešimą“
Taip pat nepamirškite pridėti nuorodos į scenarijaus failą app.js, kuriame yra jūsų valdiklio šaltinio kodas.
Event Registration Guru99 Global Event
{{message}}
Jei aukščiau nurodytas kodas įvestas teisingai, paleidus kodą naršyklėje bus rodoma ši išvestis.
Išvestis:
Santrauka
- Pagrindinė valdiklio atsakomybė yra sukurti srities objektą, kuris savo ruožtu bus perduotas rodiniui
- Kaip sukurti paprastą valdiklį naudojant „ng-app“, „ng-controller“ ir „ng-model“ direktyvas
- Kaip pridėti pasirinktinius metodus prie valdiklio, kurį galima naudoti norint atskirti įvairias angularjs modulio funkcijas.
- Valdikliai gali būti apibrėžti išoriniuose failuose, kad šis sluoksnis būtų atskirtas nuo rodinio. Paprastai tai yra geriausia praktika kuriant žiniatinklio programas.