Kaj je krmilnik v AngularJs?
Krmilniki v AngularJs vzamejo podatke iz pogleda, obdelajo podatke in jih nato pošljejo v pogled, ki je prikazan končnemu uporabniku. Krmilnik bo imel vašo osnovno poslovno logiko.
Krmilnik bo uporabil podatkovni model, izvedel zahtevano obdelavo in nato izhod poslal v pogled, ki bo nato prikazan končnemu uporabniku.
V tej vadnici boste izvedeli-
- Kaj Controller počne z vidika Angular
- Kako zgraditi osnovni krmilnik
- Kako določiti metode v krmilniku
- Uporaba ng-krmilnika v zunanjih datotekah
- Primarna odgovornost krmilnika je nadzor nad podatki, ki se posredujejo v pogled. Obseg in pogled imata dvosmerno komunikacijo.
- Lastnosti pogleda lahko prikličejo "funkcije" na obsegu. Poleg tega lahko dogodki v pogledu zahtevajo "metode" za obseg. Spodnji delček kode daje preprost primer funkcije.
- Funkcija ($ obseg), ki je definirana pri definiranju krmilnika in notranja funkcija, ki se uporablja za vrnitev združevanja $ scope.firstName in $ scope.lastName.
- Ko v funkciji AngularJS določite funkcijo kot spremenljivko, je znana kot metoda.
- Podatki na ta način prehajajo iz krmilnika v obseg, nato pa podatki prehajajo naprej in nazaj iz obsega v pogled.
- Obseg se uporablja za prikaz modela na pogled. Model je mogoče spremeniti z metodami, opredeljenimi v obsegu, ki jih je mogoče sprožiti z dogodki iz pogleda. Določimo lahko dvosmerno vezavo modela od obsega do modela.
- Krmilnikov v idealnem primeru ne bi smeli uporabljati za manipulacijo z DOM. To bi morale storiti direktive, ki jih bomo videli kasneje.
- Najboljša praksa je, da krmilniki temeljijo na funkcionalnosti. Če imate na primer obrazec za vnos in za to potrebujete krmilnik, ustvarite krmilnik, imenovan "krmilnik obrazca".
- Dodajamo sklice na tabele slogov CSS bootstrap, ki se bodo uporabljale skupaj s knjižnicami bootstrap.
- Dodajamo sklice na knjižnice angularjs. Torej, zdaj bomo vse, kar naredimo z angular.js naprej, sklicevali iz te knjižnice.
- Dodajamo sklice na knjižnico bootstrap, da bo naša spletna stran bolj odzivna za nekatere kontrole.
- Dodali smo sklice na knjižnice jquery, ki bodo uporabljene za manipulacijo z DOM. To zahteva Angular, ker so nekatere funkcije v Angular odvisne od te knjižnice.
- Najprej svoje datoteke ločimo v dve mapi, kot je to storjeno s katero koli običajno spletno aplikacijo. Imamo mapo "CSS". Vseboval bo vse naše kaskadne datoteke s slogom, nato pa bomo imeli svojo mapo "lib", v kateri bodo vse naše datoteke JavaScript.
- Datoteka bootstrap.css je postavljena v mapo CSS in je bila uporabljena za lep videz našega spletnega mesta.
- Angular.js je naša glavna datoteka, ki smo jo prenesli s spletnega mesta angularJS in jo shranili v našo mapo lib.
- Datoteka app.js bo vsebovala našo kodo za krmilnike.
- Datoteka bootstrap.js se uporablja za dopolnitev datoteke bootstrap.cs za dodajanje zagonske funkcije v našo spletno aplikacijo.
- Datoteka jquery bo uporabljena za dodajanje funkcionalnosti manipulacije DOM na naše spletno mesto.
Kaj Controller počne z vidika Angular
Sledi preprosta definicija delovanja Angular JS Controller.
Kako zgraditi osnovni krmilnik
Preden začnemo z ustvarjanjem krmilnika, moramo najprej pripraviti osnovno nastavitev strani HTML.
Spodnji delček kode je preprosta stran HTML, ki ima naslov "Registracija dogodkov" in vsebuje sklice na pomembne knjižnice, kot so Bootstrap, jquery in Angular.
Privzeto je zgornji delček kode prisoten v vseh naših primerih, tako da lahko v naslednjih odsekih prikažemo samo določeno kodo angularJS.
Drugič, poglejmo naše datoteke in strukturo datotek, s katerimi bomo začeli v času našega tečaja.
Oglejmo si primer uporabe angular.js,
Tukaj želimo narediti samo prikaz besed "AngularJS" v obliki besedila in v besedilnem polju, ko si stran ogledamo v brskalniku.
Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Razlaga kode:
- Ključna beseda ng-app se uporablja za označevanje, da je treba to aplikacijo obravnavati kot kotno aplikacijo. Vse, kar se začne s predpono 'ng', je znano kot direktiva. "DemoApp" je ime, ki smo ga dobili z aplikacijo Angular.JS.
- Ustvarili smo oznako div in v to oznako smo dodali direktivo ng-krmilnika skupaj z imenom našega krmilnika "DemoController". To v bistvu omogoča, da naša oznaka div lahko dostopa do vsebine demo krmilnika. V direktivi morate omeniti ime krmilnika, da zagotovite dostop do funkcionalnosti, opredeljene v krmilniku.
- Ustvarjamo vezavo modela z uporabo direktive ng-model. To naredi tako, da na besedilno polje za Ime vadnice veže vezavo na spremenljivko člana "tutorialName".
- Ustvarjamo spremenljivko člana z imenom "tutorialName", ki bo uporabljena za prikaz informacij, ki jih uporabnik vnese v besedilno polje za Ime vadnice.
- Ustvarjamo modul, ki bo priložen naši aplikaciji DemoApp. Tako ta modul zdaj postane del naše aplikacije.
- V modulu definiramo funkcijo, ki naši spremenljivki tutorialName dodeli privzeto vrednost "AngularJS".
Če se ukaz uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.
Izhod:
Ker smo spremenljivki tutorialName dodelili vrednost "Angular JS", se to prikaže v besedilnem polju in vrstici z navadnim besedilom.
Kako določiti metode v krmilniku
Običajno bi želeli v krmilniku definirati več metod za ločevanje poslovne logike.
Recimo, če bi želeli, da vaš krmilnik naredi 2 osnovni stvari,
- Izvedite dodajanje 2 številk
- Izvedite odštevanje 2 števil
Nato bi v idealnem primeru ustvarili dve metodi znotraj krmilnika, eno za izvedbo seštevanja in drugo za odštevanje.
Poglejmo preprost primer, kako lahko v krmilniku Angular.JS definirate metode po meri. Krmilnik bo preprosto vrnil niz.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Razlaga kode:
- Tu pravkar definiramo funkcijo, ki vrne niz "AngularJS". Funkcija je na predmet obsega pritrjena s spremenljivko člana, imenovano tutorialName.
- Če se ukaz uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.
Izhod:
Uporaba ng-krmilnika v zunanjih datotekah
Oglejmo si primer "HelloWorld", kjer je bila vsa funkcionalnost postavljena v eno datoteko. Zdaj je čas, da kodo krmilnika postavite v ločene datoteke.
Za to sledimo spodnjim korakom.
Korak 1) V datoteko app.js dodajte naslednjo kodo za krmilnik
angular.module('app',[]).controller('HelloWorldCtrl',function($scope){$scope.message = "Hello World"});
Zgornja koda naredi naslednje stvari,
- Določite modul, imenovan "app", ki bo imel krmilnik skupaj s funkcijo krmilnika.
- Ustvarite krmilnik z imenom "HelloWorldCtrl". Ta krmilnik bo uporabljen za funkcionalnost prikaza sporočila "Hello World".
- Objekt obsega se uporablja za posredovanje informacij iz krmilnika v pogled. Torej, v našem primeru bo objekt obsega uporabljen za shranjevanje spremenljivke, imenovane "sporočilo".
- Definiramo spremenljivko sporočila in ji dodelimo vrednost "Hello World".
Korak 2) Zdaj v datoteko Sample.html dodajte razred div, ki bo vseboval direktivo ng-controller in nato dodajte sklic na spremenljivko člana "message"
Prav tako ne pozabite dodati sklica na datoteko skripta app.js, ki vsebuje izvorno kodo vašega krmilnika.
Event Registration Guru99 Global Event
{{message}}
Če je zgornja koda pravilno vnesena, se med zagonom kode v brskalniku prikaže naslednji izhod.
Izhod:
Povzetek
- Primarna odgovornost krmilnika je ustvariti predmet obsega, ki se nato prenese v pogled
- Kako zgraditi preprost krmilnik z uporabo direktiv ng-app, ng-controller in ng-model
- Kako krmilniku dodati metode po meri, ki jih lahko uporabimo za ločevanje različnih funkcij znotraj modula angularjs.
- V zunanjih datotekah je mogoče določiti krmilnike, ki ločujejo to plast od sloja Pogled. To je običajno najboljša praksa pri ustvarjanju spletnih aplikacij.