Što je kontroler u AngularJ-ovima?
Kontrolori u AngularJs preuzimaju podatke iz pogleda, obrađuju podatke i zatim te podatke šalju u prikaz koji se prikazuje krajnjem korisniku. Upravljač će imati vašu osnovnu poslovnu logiku.
Upravljač će koristiti podatkovni model, izvršiti potrebnu obradu, a zatim proslijediti izlaz u prikaz koji se zauzvrat prikazuje krajnjem korisniku.
U ovom vodiču naučit ćete-
- Što Controller radi iz perspektive Angulala
- Kako izraditi osnovni kontroler
- Kako definirati metode u kontroleru
- Korištenje ng-kontrolera u vanjskim datotekama
- Primarna odgovornost kontrolora je kontrolirati podatke koji se prosljeđuju u prikaz. Opseg i pogled imaju dvosmjernu komunikaciju.
- Svojstva prikaza mogu pozivati "funkcije" na opsegu. Štoviše, događaji na prikazu mogu pozvati "metode" na opsegu. Isječak koda u nastavku daje jednostavan primjer funkcije.
- Funkcija ($ opseg) koja je definirana pri definiranju kontrolera i interna funkcija koja se koristi za vraćanje spajanja $ scope.firstName i $ scope.lastName.
- U AngularJS kada definirate funkciju kao varijablu, ona je poznata kao Method.
- Podaci na taj način prelaze iz upravljača u opseg, a zatim podaci prelaze iz opsega u prikaz.
- Opseg se koristi za izlaganje modela pogledu. Model se može izmijeniti metodama definiranim u opsegu koje se mogu pokrenuti putem događaja iz pogleda. Možemo definirati dvosmjerno vezivanje modela iz opsega u model.
- Kontroleri se idealno ne bi trebali koristiti za manipulaciju DOM-om. To bi trebale učiniti direktive koje ćemo vidjeti kasnije.
- Najbolja praksa je imati kontrolere na temelju funkcionalnosti. Na primjer, ako imate obrazac za unos, a za to vam je potreban kontroler, stvorite kontroler nazvan "kontroler oblika".
- Dodajemo reference na CSS tablice bootstrap CSS-a, koje će se koristiti zajedno s knjižnicama bootstrapa.
- Dodajemo reference na angularjs knjižnice. Dakle, sve što radimo s angular.js ubuduće bit će referencirano iz ove biblioteke.
- Dodajemo reference na biblioteku bootstrap kako bi naša web stranica više odgovarala na određene kontrole.
- Dodali smo reference na knjižnice jquery koje će se koristiti za DOM manipulaciju. To zahtijeva Angular jer neke funkcije u Angulu ovise o ovoj knjižnici.
- Najprije razdvajamo datoteke u 2 mape, kao što se radi sa bilo kojom uobičajenom web aplikacijom. Imamo mapu "CSS". Sadržat će sve naše kaskadne datoteke s datotekama stilova, a zatim ćemo imati mapu "lib" koja će sadržavati sve naše JavaScript datoteke.
- Datoteka bootstrap.css nalazi se u mapi CSS i koristi se za dodavanje dobrog izgleda i osjećaja našoj web stranici.
- Angular.js je naša glavna datoteka koja je preuzeta sa stranice angularJS i čuvana u našoj mapi lib.
- Datoteka app.js sadržavat će naš kod za kontrolere.
- Datoteka bootstrap.js koristi se kao dodatak datoteci bootstrap.cs za dodavanje funkcije bootstrap našoj web aplikaciji.
- Datoteka jquery služit će za dodavanje funkcionalnosti DOM manipulacije našoj web stranici.
Što Controller radi iz perspektive Angulala
Slijedi jednostavna definicija rada kutnog JS kontrolera.
Kako izraditi osnovni kontroler
Prije nego što započnemo s izradom kontrolera, prvo moramo postaviti osnovno postavljanje HTML stranice.
Isečak koda u nastavku jednostavna je HTML stranica koja ima naslov "Registracija događaja" i sadrži reference na važne knjižnice kao što su Bootstrap, jquery i Angular.
Prema zadanim postavkama gornji isječak koda bit će prisutan u svim našim primjerima, tako da u sljedećim odjeljcima možemo prikazati samo određeni kutni JS kôd.
Kao drugo, pogledajmo naše datoteke i strukturu datoteka s kojima ćemo započeti tijekom našeg tečaja.
Pogledajmo primjer kako koristiti angular.js,
Ovdje želimo samo prikazati riječi "AngularJS" u tekstualnom formatu i u tekstnom okviru kada se stranica pregledava u pregledniku.
Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Objašnjenje koda:
- Ng-app ključna riječ koristi za označavanje da ovaj program treba uzeti u obzir kao kutni primjene. Sve što započinje s prefiksom 'ng' poznato je kao direktiva. "DemoApp" naziv je koji je dan našoj aplikaciji Angular.JS.
- Izradili smo div oznaku i u tu smo oznaku dodali ng-upravljačku direktivu zajedno s imenom našeg upravljača "DemoController". To u osnovi našoj div oznaci omogućuje pristup sadržaju Demo kontrolera. Morate spomenuti ime upravljača prema direktivi kako biste bili sigurni da možete pristupiti funkciji definiranoj unutar kontrolera.
- Stvaramo vezivanje modela pomoću direktive ng-model. Ovo što čini je da veže tekstualni okvir za Ime vodiča da bude vezan za člansku varijablu "tutorialName".
- Stvaramo varijablu člana nazvanu "tutorialName" koja će se koristiti za prikaz podataka koje korisnik upisuje u tekstni okvir za Ime vodiča.
- Izrađujemo modul koji će se priložiti našoj aplikaciji DemoApp. Dakle, ovaj modul sada postaje dio naše aplikacije.
- U modulu definiramo funkciju koja našoj varijabli tutorialName dodjeljuje zadanu vrijednost "AngularJS".
Ako se naredba uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
Budući da smo varijabli tutorialName dodijelili vrijednost "Angular JS", to se prikazuje u okviru za tekst i u običnom retku teksta.
Kako definirati metode u kontroleru
Uobičajeno bi bilo htjeti definirati više metoda u upravljaču za odvajanje poslovne logike.
Na primjer, pretpostavimo da ako želite da vaš kontroler radi dvije osnovne stvari,
- Izvršite zbrajanje 2 broja
- Izvršite oduzimanje 2 broja
Tada biste idealno stvorili 2 metode unutar svog kontrolera, jednu za izvršavanje zbrajanja, a drugu za oduzimanje.
Pogledajmo jednostavan primjer kako možete definirati prilagođene metode unutar kontrolera Angular.JS. Kontroler će jednostavno vratiti niz.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Objašnjenje koda:
- Ovdje samo definiramo funkciju koja vraća niz "AngularJS". Funkcija je priključena na objekt opsega putem varijable člana koja se naziva tutorialName.
- Ako se naredba uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
Korištenje ng-kontrolera u vanjskim datotekama
Pogledajmo primjer "HelloWorld" gdje je sva funkcionalnost smještena u jednu datoteku. Sada je vrijeme da kôd kontrolera smjestite u zasebne datoteke.
Slijedimo korake u nastavku da bismo to učinili.
Korak 1) U datoteku app.js dodajte sljedeći kod za svoj kontroler
angular.module('app',[]).controller('HelloWorldCtrl',function($scope){$scope.message = "Hello World"});
Gornji kod čini sljedeće stvari,
- Definirajte modul nazvan "aplikacija" koji će sadržavati kontroler zajedno s funkcionalnošću kontrolera.
- Stvorite kontroler s imenom "HelloWorldCtrl". Ovaj kontroler će se koristiti za funkciju prikazivanja poruke "Hello World".
- Objekt opsega koristi se za prosljeđivanje podataka iz kontrolera u pogled. Tako će se u našem slučaju objekt opsega koristiti za zadržavanje varijable koja se naziva "poruka".
- Definiramo poruku varijable i dodijeljujemo joj vrijednost "Hello World".
Korak 2) U datoteku Sample.html dodajte div klasu koja će sadržavati direktivu ng-controller, a zatim dodajte referencu na člansku varijablu "message"
Također ne zaboravite dodati referencu na datoteku skripte app.js koja ima izvorni kod za vaš kontroler.
Event Registration Guru99 Global Event
{{message}}
Ako je gornji kôd ispravno unesen, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
Sažetak
- Primarna odgovornost kontrolera je stvoriti objekt opsega koji se zauzvrat prenosi na pogled
- Kako izraditi jednostavni kontroler pomoću direktiva ng-app, ng-controller i ng-model
- Kako dodati prilagođene metode kontroleru koji se mogu koristiti za odvajanje različitih funkcionalnosti unutar modula angularjs.
- Upravljači se mogu definirati u vanjskim datotekama kako bi se ovaj sloj odvojio od sloja View. To je obično najbolja praksa prilikom izrade web aplikacija.